Docs

[Pablo F]

Hi Paul,

Item 2 already solved, thank you very much.

1. I have deleted (emptied cache, etc.):

linkId: "gallery-image"

So the current script is:

<script>
      jQuery(document).ready(function(){jQuery(".x-menu-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>

But as you can check (at the website and the capture), these menu links still work as a gallery, because in the page there are white vertical bands on the sides which are links to the other pages.

I´ve tried changing the menu link classes to:

x-menu-lightbox1
x-menu-lightbox2
x-menu-lightbox3

But this way the menu links open in a new window, not in a modal window/lightbox.

I guess this issue is due to we are applying the same x-menu-lightbox CSS class to 3 elements, that way the lightbox could be organizing them in the same gallery, instead of showing them independently as the lightbox4 in the contact form does.

Any idea about how to solve this remaining issue?

Thank you again.

[Rad]

Hi there,

Please try this one,

<script>
      jQuery(document).ready(function(){jQuery(".x-nav-wrap.desktop .x-menu-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}});});

jQuery(document).ready(function(){jQuery(".x-nav-wrap.mobile .x-menu-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}});});

jQuery(document).ready(function(){jQuery(".x-colophon .x-menu-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>

Basically, there are multiple instances of elements with the same selector. Hence, let’s narrow it by adding selector on them one at a time. Remember, one selector for multiple elements means you’re grouping them as gallery.

Thanks!

[Pablo F]

Hi again Rad,

Maybe I´ve missed something but it doesn´t work, the results are the same.

I´ve tried it replacing the former script, then using both at the same time, and the light boxes are shown together in a gallery with the ability to navigate through the 3 pages inside it.

Would be a better solution to isolate each page in its own selector? That solution worked at my other X sites for regular links (like it does at the contact form of this site). The question here would be how to implement it into the menu links.

Best regards.

[Rad]

Hi there,

Multiple menus exist on the same page, hence, isolating it per page will not gonna work. The above code will isolate each menu since the 3 has different selectors.

But I noticed you have two items in the single menu, which makes it 3 x 2 instances. Let’s narrow it more, please change it to this

<script>

jQuery(document).ready(function(){jQuery(".x-colophon #menu-item-365 > 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}});});

jQuery(document).ready(function(){jQuery(".x-colophon #menu-item-363 > 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>

Selecting specific menu by ID within the footer, ignoring all other instances.

Hope this helps.

[Pablo F]

Hi Rad,

Now it works like a charm!

I have needed to crete the 3rd menu link selector:

.x-colophon #menu-item-364

Thank you so much, great support.

[Pablo F]

Anyway,

I have seen that there is an issue now related with the background opacity which is 100% and a top and bottom margin are shown on each linkgbox page (see the attached capture).

The current javascript code is:

<script type="text/javascript" src="' . home_url() . '/data/plugins/cornerstone/assets/dist/js/site/vendor-ilightbox.min.js">
 </script>

<script>
    jQuery(document).ready(function(){jQuery(".x-menu-lightbox > a").iLightBox({skin: "light",linkId: "gallery-image",overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: "horizontal",controls: {thumbnail: false}});});

    jQuery(document).ready(function(){jQuery(".x-colophon #menu-item-365 > 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}});});

    jQuery(document).ready(function(){jQuery(".x-colophon #menu-item-364 > 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}});});

    jQuery(document).ready(function(){jQuery(".x-colophon #menu-item-363 > 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>

Best regards.

[Rad]

Hi there,

You should remove this,

jQuery(document).ready(function(){jQuery(".x-menu-lightbox > a").iLightBox({skin: "light",linkId: "gallery-image",overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: "horizontal",controls: {thumbnail: false}});});

The purpose of narrowing the javascript is to replace it and not to append to existing one.

Thanks!

[Pablo F]

Hi Rad,

I have already removed it. But the margins and the opacity issue is still there, as you can check.

It´s not a big problem, but if you know how to fix it, I´ll appreciate your help.

Thank you.

[Rad]

Hi there,

Yes, I can see it now. Looks like I was looking on the cache copy.

Please remove this,

.ilightbox-container iframe {
    width: 70%;
    left: 15%;
    position: relative;
}

Then add this,

.ilightbox-holder div.ilightbox-container {
    width: 100% !important;
}
.ilightbox-holder.light {
    left: 15% !important;
    right: 15% !important;
}

Thanks!

[Pablo F]

Wow Rad,

Now it looks better than I could imagine, good job!

Thank you so much again.

[Rue Nel]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts