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

Question

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

Answer 1

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.

Answer 2

I have found the solutions

there is jquery feature for this problem. Use of data-gallery

have a look at the link

https://github.com/blueimp/Gallery#container-ids-and-link-grouping