ashleydw / lightbox

A lightbox gallery plugin for Bootstrap
http://ashleydw.github.io/lightbox
MIT License
1.85k stars 1.31k forks source link

How to setup 3 separate lightboxes on one page? #315

Closed JackieGable closed 5 years ago

JackieGable commented 5 years ago

I love the lightbox and plan to use it on my website. But I'm having a problem trying to get 3 separate lightboxes to work separately on a page. I've tried the hidden images method but it takes the user to one picture that flows into the next category. What I want is to have one visable picture (example: picture of fruit) for each category and when the user clicks on that picture it only takes them to the pictures in that category (and show only pictures of fruit). And the next category might be veggies and show only pictures of veggies.....etc.

How can I do that? I have created a codepen to experiment with this but cannot get it to work right. Any help would be greatly appreciated. Here is the link to my codepen: https://codepen.io/JapperCat/pen/jvLzYV

chrisbo commented 5 years ago

Just give all of the data-gallery attributes for each gallery a different value e.g.

Apple gallery data-gallery="apple"

Banana gallery data-gallery="banana"

JackieGable commented 5 years ago

Thank you so much for getting back to me so quickly. That worked and it's Much appreciated!!!