Docs

[Stuart]

Hello, I would be grateful for your assistance to have a page open in a lightbox, rather than a new page.

Please see: http://stuster.net/spielwelt/gap/#teachers
When clicking on ‘Esme Koslitz’, I would like this to open in a lightbox.

I have added the custom javascript below so that this feature box is wrapped in a link, but have no idea how to open it in a lightbox. I added a class ‘lightbox’ to the anchor tag, but don’t know where to go from here.

(function($){
  $('#esme').wrap('<a class="lightbox" href="http://stuster.net/spielwelt/gap/esme-koslitz/"></a>');
}

Many thanks!

[Rupok]

Hi there,

Thanks for wriitng in! You can add any URL at your button’s href. If it’s not image then lightbox will automatically load inside the iframe.

Eg.

[button href="http://stuster.net/spielwelt/gap/esme-koslitz/" class="my_lightbox_button"]Open my page[/button]
[lightbox selector=".my_lightbox_button"]

Hope this helps.

[Stuart]

Hi again, it’s not a button that opens the link, it’s a link wrapped around a feature box (see original post for details). So I can’t use the button shortcode to get this to work. Grateful for your further assistance. Thanks.

[Rupok]

Hi there,

I am not sure if that will work or not but you can try adding this :

[lightbox selector=".lightbox"]

That is you already have the lightbox activator button (your feature box) and now you need to add the selector with same class. So it should work if you add this there somewhere.

Thanks!

[Stuart]

Ok, so where would I add that? Is there somewhere within the feature box in cornerstone that I can add it? Or do I need to add it in the text editor outside of cornerstone? And if outside cornerstone, does this mean that I can’t modify the page in cornerstone in future? Thanks again!

[Paul R]

Hi,

You can add it in a text element that is on the same page.

Thanks

[Stuart]

Unfortunately this gives a very strange result; the lightbox seems to be larger than full screen.

[Stuart]

Ok, ignore all that, I’ve found my own solution. For anyone else stumbling on this thread, follow these very simple steps:

1. Install the FancyBox for WordPress plugin.
2. Add the class “fancybox” to your anchor tag.
3. Voila! It works like magic.

This will give you a perfect lightbox for opening an overlay of html content.

[Rad]

Glad to hear that and thanks for sharing 🙂

[Author]

Posts