Docs

[Pablo F]

Hi,

I´ve seen several posts about adding a iLightbox to a menu item but no one worked for me, for example:

https://community.theme.co/forums/topic/how-to-launch-ilightbox-from-menu

https://community.theme.co/forums/topic/open-form-in-lightbox-from-menu-item

Could you please tell me how to open a menu item (the legal, privacy, etc. pages in this case) inside a regular iLightbox?

Thank you.

[Paul R]

Hi Pablo,

Can you provide us your site url so we can check why it’s not working.

Thanks

[Pablo F]

This reply has been marked as private.

[Joao]

Hi Pablo

The iLightbox you are referring to is the native X lightbox or a different plugin?

Would you mind also describing what is your goal with that so we can help you find the best solution?

Thanks

Joao

[Pablo F]

Hi Joao,

Exactly, I mean the X Lightbox.

What I want to do is open in modal windows these links at the bottom navigation menu (called “Menu inferior”):

– Aviso legal (www.nuevaletusa.es/legal page ID 354)
– Política de privacidad (www.nuevaletusa.es/privacidad page ID 360)
– Política de cookies (www.nuevaletusa.es/cookies page ID 358)

They are just text pages with the company logo at the top, without header, footer, etc. They contain the legal, privacy and cookies rules of the site.

As an example, a modal window like the window that opens when you make a search in this forum whould be perfect.

Hope it helps.

[Pablo F]

PS: I forgot the last modal link:

At http://www.nuevaletusa.es/contacto

You´ll see there is a regular link in the Contact Form 7 “He leído y acepto la política de privacidad de este sitio web.” (I have read and agree the private policy of this website).

That link should open in a modal window http://www.nuevaletusa.es/privacidad like the same link at the bottom navigation bar.

Like I did in another X-Theme installation with Renew, I have set this class in that link:

<a href="http://www.nuevaletusa.es/privacidad" class="link-lightbox1">política de privacidad</a>

And this code at the CSS customizer:

* Lightbox */

.ilightbox-container iframe {
    width: 70%;
    left: 15%;
    position: relative;
}
.page-id-360 .x-main,{
    width: 80% !important;
    margin: 0 auto;
}

I have tried the solution they gave me here for the Renew site some months ago

https://community.theme.co/forums/topic/legal-advices-within-lightboxes

But it doesn´t work at this Ethos site.

Thank you again.

[Christopher]

Hi there,

Please add this code in child theme’s functions.php file :

add_action( 'wp_enqueue_scripts', 'x_lightbox_enqueue' );

function x_lightbox_enqueue() {
wp_enqueue_script( 'vendor-ilightbox' );
}

add_action('wp_footer', 'x_link_lightbox');

function x_link_lightbox () { ?>
<script id="x-responsive-lightbox-menu">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>
<?php }

Add x-menu-lightbox in menu item’s class field, see the attachment.

Hope that helps.

[Pablo F]

Thank you Christopher,

Your solution is the same one I linked in my first post. I have tried it again and it does´t work.

https://community.theme.co/forums/topic/how-to-launch-ilightbox-from-menu/

Is it possible that the lightbox is somehow disabled at my site?

Thank you.

[Paul R]

Hi,

Please try this code instead.

// Adding Lightbox jQuery code.

add_action('wp_footer', 'enqueue_lightbox_script');

function enqueue_lightbox_script() {

  echo '

    <script type="text/javascript" src="' . home_url() . '/wp-content/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}});});
    </script>

  ';
}

Hope that helps.

[Pablo F]

Hello Paul,

That solution works with the menu links, thank you.

But regarding the Lightbox behavior, as they are html pages, it doesn´t make sense that it works like an images gallery. How could be show each page in its own lightbox instead shown all of them in the same one?

Another weird thing, thinking on SEO, is the link turns from http://www.nuevaletusa.es/home (or at least /privacy) to http://www.nuevaletusa.es/#gallery-image/1

I have added this CSS code to the customizer to add a margin to that lightbox:

/* Lightbox legal */

.ilightbox-container iframe {
    width: 70%;
    left: 15%;
    position: relative;
}
.page-id-654 .x-main,
.page-id-658 .x-main,
.page-id-660 .x-main,{
    width: 80% !important;
    margin: 0 auto;
}

I don´t know if it could be customized for that purpose.

And the regular “política de privacidad” link at the Contact form http://www.nuevaletusa.es/contacto doesn´t work with that class=”link-lightbox”:

<a href="http://www.nuevaletusa.es/privacidad" class="link-lightbox">política de privacidad</a>

Do you know how to make the lightbox there?

PS: Just in case, is it possible to activate/use the same lightbox look and feel you have here in the Support Forum Search? (I have attached a capture). It seems lighter (loads faster) and more ergonomic than the other.

Best regards.

[Rad]

Hi there,

What do you mean by this,

Another weird thing, thinking on SEO, is the link turns from http://www.nuevaletusa.es/home (or at least /privacy) to http://www.nuevaletusa.es/#gallery-image/1

Would you mind providing a video recording?

About the lightbox here http://www.nuevaletusa.es/contacto, you should add lightbox instance with your preferred selector. Example,

<a href="http://www.nuevaletusa.es/privacidad" class="link-lightbox">política de privacidad</a>
[lightbox selector=".link-lightbox"]

Our forum uses different lightbox. If you like, you may use 3rd party lightbox too.

Thanks!

[Pablo F]

Hi Rad,

1. I mean that for some reason when opening some of the 3 lighbox menu links at the footer of http://www.nuevaletusa.es, the URL turns into /#gallery-image/number, instead of remaining with http://www.nuevaletusa.es, which is the expected behavior after opening a modal window. Check http://www.adagiodistribucion.es for example which is working as expected.

Please note it´s my 4th X-Theme site. I have already used the lightbox with no issues at all in the other 3 installations, based on Renew.

2. I know how to instantiate it on X-Renew and that´s the way you suggest. I have already posted the link in this thread regarding another forum question about the same with all these solutions. But at this site http://www.nuevaletusa.es with Ethos, something is going wrong with Lightbox.

Please go to http://www.adagiodistribucion.es/contacto (another of my sites) and check the same link working with:

<a href="http://www.adagiodistribucion.es/privacidad" class="link-lightbox4">política de privacidad</a> [lightbox selector=".link-lightbox4"]

But at http://www.nuevaletusa.es, that code shows the shortcode in the frontside and the lightbox doesn´t work.

Thank you.

[Rad]

Hi there,

1. Ah, thanks for clarification. From this added code,

<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}});});
</script>

Please remove linkId, like this

  <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>

2. Sorry, still a bit confusing. I thought we’re discussing this http://www.nuevaletusa.es/contacto with content like this,

<a href="http://www.nuevaletusa.es/privacidad" class="link-lightbox">política de privacidad</a>

And I don’t see instances of lightbox shortcode. I checked it again about 3 times and there is no lightbox shortcode. Would you mind sharing a screenshot where the lightbox shortcode is added? It’s not even added to the form.

.
.
.
.

<label> Asunto
    [text* asunto] </label>

<label> Mensaje
    [textarea* mensaje] </label>

<p>[acceptance accept-this] He leído y acepto la <a href="http://www.nuevaletusa.es/privacidad" target="_blank">política de privacidad</a> de este sitio web.</p>

[submit "Enviar"]

Thanks!

[Pablo F]

Hi again Rad,

1. You said “Please remove linkId, like this”, but both scripts you have provided are exactly the same. Do you mean just remove this?:

linkId: "gallery-image"

2. That´s correct because if I set at the contact form the link as:

<a href="http://www.adagiodistribucion.es/privacidad" class="link-lightbox4">política de privacidad</a> [lightbox selector=".link-lightbox4"]

The lighbox won´t open and the selector would be shown in the front page. As soon as I know there´s a solution, I will update that link. Anyway, if you want to make some test by yourself, feel free to access the site (the credentials are at the second post of this thread).

Thank you.

[Paul R]

Hi Pablo,

1. Yes, you need to remove that.

2. I went ahead and fix it.
I added the lightbox shortcode together with your contact form shortcode.

[contact-form-7 id="4" title="Formulario de contacto"]
 [lightbox selector=".link-lightbox4"]

Then I added a class to your link

<p>[acceptance accept-this] He leído y acepto la <a href="http://www.nuevaletusa.es/privacidad" class="link-lightbox4" target="_blank">política de privacidad</a> de este sitio web.</p>

Kindly check on your end.

Thanks

[Author]

Posts