BlueImp's Gallery - Different gallery for different set of images

blueimp, gallery, image, jquery, modal-dialog

Solution

Container ids and link grouping

If the data-gallery attribute value is a valid id string (e.g. "#blueimp-gallery"), it is used as container option. Setting data-gallery to a non-empty string also allows to group links into different sets of Gallery images:

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

This will open the links with the data-gallery attribute #blueimp-gallery-fruits in the Gallery widget with the id blueimp-gallery-fruits, and the links with the data-gallery attribute #blueimp-gallery-vegetables in the Gallery widget with the id blueimp-gallery-vegetables.

Problem

i am using BlueImp Gallery. As title says, imagine facebook image post, when user click on a post's image, i want to show only all the images belong to that post. I don't know how to implement this. First and foremost I have refer to doc, there is a pure js script like this ``` document.getElementById('links').onclick = function (event) { event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); }; ``` the script works when we have html like this ``` <div id="links"> <a href="images/banana.jpg" title="Banana"> <img src="images/thumbnails/banana.jpg" alt="Banana"> </a> <a href="images/apple.jpg" title="Apple"> <img src="images/thumbnails/apple.jpg" alt="Apple"> </a> <a href="images/orange.jpg" title="Orange"> <img src="images/thumbnails/orange.jpg" alt="Orange"> </a> </div> ``` because of getElementById('links') which wraps the anchor tag My problem is I have html like this (this is actually twitter bootstrap thumbnail) ``` <div id="post1"> <div class="row"> <div class="col-xs-3"> <a href="/test1.jpg" class="thumbnail" target="_blank"> <img src="test1.jpg"> </a> </div> <div class="col-xs-3"> <a href="/test2.jpg" class="thumbnail" target="_blank"> <img src="test2.jpg"> </a> </div> </div> </div> ``` i want to detect when use click on the `<a>` then show all the images belong to this post. Currently: ``` $(document).on('click', 'a.thumbnail', function () { var link = $(this); blueimp.Gallery(link); }); ``` Let's say user click on `<a href="test2.jpg">`. This function display only test.jpg. I want to display test2.jpg and able to slide to left to test1.jpg any idea how to achive that? I have been scratching my head T_T

Original source