BlueImp画廊-不同图像的不同画廊
BlueImp画廊-不同图像的不同画廊
提问于 2014-01-30 12:14:13
我正在使用BlueImp画廊。
正如标题所言，想象一下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
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-10-30 10:08:24
容器ids和链接分组
如果数据库属性值是一个有效的id字符串(例如“#blueimp-”)，则将其用作容器选项。将数据库设置为非空字符串还允许将链接分组到不同的图片库图像集：
<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，在图库小部件中打开与数据库属性的链接，并使用id blueimp-gallery-vegetables.打开与画廊小部件中的data-gallery属性#blueimp-gallery-vegetables的链接。
Stack Overflow用户
发布于 2014-01-30 14:34:56
我找到了解决办法
对于这个问题，有jquery特性。数据库的使用
看一下链接
https://github.com/blueimp/Gallery#container-ids-and-link-grouping
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21456251
复制相关文章
相似问题
腾讯云开发者
