search

blueimp / Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
https://blueimp.github.io/Gallery/
Other
3.75k stars 983 forks source link

Allow multiple galleries to use the same lightbox widget #229

Closed tonystar closed 6 years ago

tonystar commented 6 years ago

Example: 

<div id="fruits" data-gallery-group>
    <a href="images/banana.jpg" title="Banana" data-gallery>
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple" data-gallery>
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
</div>
<div id="vegetables" data-gallery-group>
    <a href="images/tomato.jpg" title="Tomato" data-gallery>
        <img src="images/thumbnails/tomato.jpg" alt="Tomato">
    </a>
    <a href="images/onion.jpg" title="Onion" data-gallery>
        <img src="images/thumbnails/onion.jpg" alt="Onion">
    </a>
</div>

Idea is the following:

  1. Mark group of images with data-gallery-group attr.
  2. On click, find the first parent with data-gallery-group attr, or fallback to <body> (global group).
  3. When selecting a links take in account data-gallery-group, so only this group will appear in the lightbox.

So, this is pretty soft and non-breaking change. Which will allow multiple galleries to use the same lightbox widget.

blueimp commented 6 years ago

Thanks @tonystar !