使用Fancybox2从多个预览图片开始创建一个图库

Starting one gallery from multiple preview pictures, with Fancybox2

本文关键字：创建 一个 开始 Fancybox2 使用      更新时间：2023-09-26

我开始一个画廊与多个预览图片(链接)。第一个按钮进入图库，第二个按钮进入同一图库中的特定照片，但如果你选择的话，你可以点击整个图库。把它想象成一个设置好的书签，带你到一个更大的图片库的不同点。

我已经复制了这是如何为我工作的，虽然它是多余的，不是很有效。我只是假装，好让整个过程循环。谢谢你的建议。

链接如下:

<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;
});

你可以在这里看到:

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

您可以只使用一个脚本和一个类用于所有链接。然后你可以添加一个(HTML5) data-index属性到你的任何链接，以设置它应该从哪个图片开始的画廊。

例如，如果你想让第二个链接从第三个图片开始，你可以这样做:

<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).data("index") - 1

参见fork JSFIDDLE

相关文章：