我正在创建一个包含多张预览图片(链接)的图库。第一个开始画廊,下一个进入同一画廊中的特定照片,但如果您愿意,可以单击整个画廊。把它想象成一个设置好的书签,可以把你带到一个更大的图像库的不同点。
我现在已经复制了它是如何为我工作的,尽管它是多余的并且效率不高。我只是假装它,以便整个事情循环。我很感激任何建议。
链接如下:
<a class="open_fancybox" href=""><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="open_fancybox2" href=""><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
这是多余的 Javascript(以不同顺序显示第二个链接的图像):
$(".open_fancybox").click(function() {
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '2nd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title : '3rd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/4_b.jpg',
title : '3rd title'
}
], {
padding : 0
});
return false;
});
$(".open_fancybox2").click(function() {
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title : '1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/4_b.jpg',
title : '2nd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '3rd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '3rd title'
}
], {
padding : 0
});
return false;
});
你可以在这里看到:
最佳答案
您可以只对所有链接使用一个脚本和一个类。然后您可以将 (HTML5) data-index
属性添加到您的任何链接以设置它应该从什么图片开始图库。
例如,如果您希望第二个链接从第 3 图片开始图库,您可以这样做:
<a class="open_fancybox" href=""><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="open_fancybox" data-index="3" href=""><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
然后在您的脚本中,检测链接是否具有 data-index
属性并相应地设置 fancybox index
,否则从第一个元素开始图库,因此:
$(".open_fancybox").click(function () {
// detect if data-index exists otherwise index = 0 (first image)
var theIndex = $(this).data("index") ? $(this).data("index") - 1 : 0;
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: '1st title'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: '2nd title'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: '3rd title'
}, {
href: 'http://fancyapps.com/fancybox/demo/4_b.jpg',
title: '4th title'
}], {
padding: 0,
index: theIndex // set what index should the gallery start from
});
return false;
});
记住,在 javascript 中,index
数字总是以 0
开头,这就是我们做 $(this) 的原因。数据(“索引”)- 1
参见 fork JSFIDDLE
关于javascript - 使用 Fancybox2 从多张预览图片开始一个画廊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16901753/