Question

正如标题所说，想象一下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'）包装了锚标记

我的问题是

我有这样的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

容器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-gallery-fruits 的链接，其ID为 blueimp-gallery-fruits < / strong>，以及带有 blueimp-gallery-vegetables 数据库属性 #blueimp-gallery-vegetables 的链接强>

Answer 2

我找到了解决方案

这个问题有jquery功能。使用数据库

查看链接

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

BlueImp的画廊 - 针对不同图像集的不同画廊

2 个答案: