Multiple lightboxes on single page

[baci]

Hi,

I would like to have multiple lightboxes on a single page. Each lightbox would be triggered by a different image on the page. I am going to hide the lightboxes until the corresponding trigger image is clicked. Currently the lightbox is showing ALL the images.

I have tried using a different class for each lightbox and I have tried using different ID but it’s not working. Can you please point me towards the proper workflow to do this?

So, I’m looking to have nine trigger images that display nine different lightboxes.

Thanks

[ruenel]

Hello @baci,

Thank you for the details. Your images displays in one single lightbox because you only have one lightbox shortcode. You will need to have different lightbox shortcode for each image and you must have a unique class selector for each image lightbox so that the lightbox will only display one image at a time.

For example:

[image class="my-image-1" type="circle" src="http://yourdomain.com/image.jpg" alt="Text"]
[image class="my-image-2" type="circle" src="http://yourdomain.com/image.jpg" alt="Text"]

[lightbox selector=".my-image-1" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="false"]
[lightbox selector=".my-image-2" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="false"]

Hope this helps. Please let us know how it goes.