我正在使用BlueImp Gallery .
正如标题所说,想象一下 Facebook 图片帖子,当用户点击帖子的图像时,我只想显示属于该帖子的所有图像。我不知道如何实现这个。
首先
我引用了doc,有一个像这样的纯js脚本
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);
};
当我们有这样的 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>
因为 getElementById('links') 包装了 anchor 标记
我的问题是
我有这样的 html(这实际上是 twitter bootstrap 缩略图)
<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
最佳答案
容器 ID 和链接分组
如果data-gallery属性值是有效的ID字符串(例如“#blueimp-gallery”),则将其用作容器选项。 将 data-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>
这将在 ID 为 blueimp-gallery-fruits< 的图库小部件中打开带有 data-gallery 属性 #blueimp-gallery-fruits 的链接/strong>,以及 ID 为 blueimp-gallery-vegetables 的图库小部件中带有 data-gallery 属性 #blueimp-gallery-vegetables 的链接强>.
关于jquery - BlueImp's Gallery - 不同图像集的不同画廊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21456251/