使用Fancybox2从多个预览图片中启动一个图库

我正在创建一个带有多个预览图片（链接）的图库。 第一个是画廊开始，下一个是同一个画廊中的特定照片，但如果您选择，可以点击整个画廊。 可以将其视为设置书签，将您带到一个更大的图像库的不同点。

我现在已经复制了这对我有用的方法，虽然这是多余的而且效率不高。 我只是假装它，以便整个事情循环。 我很感激任何建议。

以下是链接：

这是冗余的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; }); 

你可以在这里看到它：

http://jsfiddle.net/uZCC6/2687/

Answer 1

您可以只使用一个脚本，并为所有链接使用单个类 。 然后，您可以为任何链接添加（HTML5） data-index属性，以设置它应从哪个图片启动库。

例如，如果您希望第二个链接从第3个图像启动图库，您可以执行以下操作：

然后在您的脚本中，检测链接是否具有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).data("index") - 1

请参阅forked JSFIDDLE