BlueImp的畫廊 - 不同的圖片集不同的圖像

Question

我使用BlueImp Gallery。如標題所示，想象一下facebook圖片文章，當用戶點擊帖子的圖片時，我只想顯示屬於該帖子的所有圖片。我不知道如何實現這一點。

首先

我指的文檔，還有當我們有HTML這樣

<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> 

這樣

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); 
}; 

腳本純js腳本作品由於getElementById（'鏈接'）包裝錨定標記

我的問題是

我有HTML這樣的（這實際上是Twitter的引導縮略圖）

<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> 

我想檢測時對<a>使用點擊即可顯示所有圖像屬於這個帖子。

目前：

$(document).on('click', 'a.thumbnail', function() { 
    var link = $(this); 
    blueimp.Gallery(link); 
}); 

比方說，用戶點擊<a href="test2.jpg">。該功能只顯示test.jpg。我想顯示test2.jpg並能夠向左滑動test1.jpg

任何想法如何實現？我一直在抓我的頭T_T

Answer 1

我已經找到了解決方案

有jQuery的功能這個問題。數據畫廊

使用看看的鏈接

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

Answer 2

容器ID和鏈路分組

如果數據畫廊屬性值是一個有效的ID字符串（例如「＃blueimp-gallery」），它被用作容器選項。 設置數據畫廊到非空字符串也允許組鏈接到不同的組圖庫圖片：

<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> 

這將打開與數據畫廊的聯繫屬性＃blueimp畫廊-fruits與ID blueimp畫廊水果，並與數據畫廊在畫廊小部件的ID 鏈接屬性＃blueimp畫廊蔬菜圖庫部件blueimp-gallery-vegetables。