How integrate Lightbox in the nav menu (that link to an external page)

[mdexleplateau]

Hi.

I’m trying to link some items from my Nav Menu to external page on a lightbox

I’m not really sure about how to do it. I know it’s possible because some plugins allow it but .. I don’t know here.

Also, if it Use Iframe, I would like to know how can I make it work on IOS mobile. When I tried with other plugins I always have problems to scroll (Impossible because it scoll the page in the background and not the lighbox page)

Thx so much for your help

[wpCommerce]

Hi, We actually have a documentation page for it: http://lightbox.tipsandtricks-hq.com/open-lightbox-from-wordpress-menu/

If want to pop up an external page you might need to add ?iframe=true to the URL. For example:

http://example.com/test/?iframe=true

[mdexleplateau]

Hi, Thx you.

It’s working now. I saw the documentation before but nothing about ?iframe=true.

So, now I have a question.

I don’t know why but if i’m trying to open it on Iphone, the lighbox go on the top right and a part of the lightbox is croped. All content is visible but nothing is centered.

again, thx for your help

good day

[wpCommerce]

We will need to take a closer look at your site to investigate this issue. I have sent an email to your registered email address for site access. Let me know if you don’t receive it.

[mdexleplateau]

Hi.

Maybe you can answer on something.

When I’m creating a lighbox with [wp_lightbox_display_external_page] to show an external page it’s working very well even on IOS.

So, I would like to use this code from the Nav Menu.

I tried to use “wp_lightbox_prettyPhoto” with “?iframe=true” in the link like you said. but the result is very ugly on IOS.

Can you just tell me how I can use [wp_lightbox_display_external_page] in the wordpress menu ?

[wpCommerce]

They are two different popup methods. The tweak I gave you is done using the prettyPhoto library. It’s easy to create a lightbox link with it (you just add a specific rel to the link). The other one is done using fancybox but it requires more coding than a simple tweak (The plugin takes care of it when you use the shortcode).

[mdexleplateau]

Hi.

I can guess yes but can you give some advices about that ?

I’m using theme Forest X and to put their lightbox in the menus, as you, they said that i’ll need to ass some code to the child theme.

“add_action(‘wp_footer’, function() {

?>

<script type=’text/javascript’ src='<?php echo get_site_url(); ?>/wp-content/plugins/x-shortcodes/js/dist/site/vendor-ilightbox.min.js’></script>

<script id=”x-responsive-lightbox-1″>jQuery(document).ready(function(){jQuery(‘.show-lightbox a’).iLightBox({skin: ‘light’,overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: ‘horizontal’,controls: {thumbnail: false}});});</script><script id=”x-responsive-lightbox-2″>jQuery(document).ready(function(){jQuery(‘.show-lightbox a’).iLightBox({skin: ‘light’,overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: ‘horizontal’,controls: {thumbnail: false}});});

</script>

<?php

});

It’s working well but not with IOS. It’s why I bought your plugin actually because I saw it was working on IOS (Even if I took time to understand how)

I guess it’s possible to use a code like that too. ?

[wpCommerce]

We will need to test the code on your site to check it. Can you please replied to the email that I sent 5 days ago?

[Author]

Posts