Docs

[saintp]

I am having the hardest time figuring this out and the lightbox shortcode page and past Forum replies on this topic have been zero help.

How should I structure the shortcode so that I can have a button (with text) that, upon click, launches a lightbox with multiple images?

This is what I have thus far:

[button type=”transparent” style=”background:white;” shape=”square” size=”regular” button class=”btn-lightbox” href=”http://image1.jpg” link=”true”][icon type=”group”]Button Text[/button]
<div style=”display: none;”>
[href=”http://img2.jpg&#8221; link=”true]
</div>
[lightbox selector=”.btn-lightbox”]

The button works, and the lightbox appears with the first image. But getting additional images to show is a no-go.

Can you dictate exactly how the shortcode should be to get this to work?

And I would highly suggest adding the solution to the KB page on this.

[Rad]

Hi there,

Thanks for posting in.

What do you mean by multiple images? Lightbox can only display one image at a time. But you can always assign one lightbox for multiple images.

That means, if you have 4 images then you should have 4 links/buttons too. But you can only have one lightbox for all of them. Would you mind providing more details of what you’re trying to achieve?

Thanks!

[saintp]

This reply has been marked as private.

[Friech]

Hi There,

Please update your shortcode to this:

[button type="transparent" style="background:white;" shape="square" size="regular" button class="btn-lightbox" href="IMAGE URL" link="true"][icon type="group"]Button Text[/button]
<div style="display: none;">
[x_image type="none" src="IMAGE URL" alt="" link="true" href="" class="btn-lightbox"]
[x_image type="none" src="IMAGE URL" alt="" link="true" href="" class="btn-lightbox"]
[x_image type="none" src="IMAGE URL" alt="" link="true" href="" class="btn-lightbox"]
[x_image type="none" src="IMAGE URL" alt="" link="true" href="" class="btn-lightbox"]
[x_image type="none" src="IMAGE URL" alt="" link="true" href="" class="btn-lightbox"]
</div>
[lightbox selector=".btn-lightbox"]

Replace all the instances of IMAGE URL, including that one on the button shortcode because all links with a class of btn-lightbox will included in the lightbox.

Hope it helps, Cheers!

[saintp]

Merci beaucoup!

It worked perfectly.

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts