jQuery Fancybox - 多个画廊 - 多个打开按钮

Question

好的，我们开始...

我想要实现的是在一个页面上拥有多个图库，但我不想单击缩略图来打开它们，而是想要一个自定义打开按钮。

<a href="#" class="gallerya">Open Gallery 1</a>
<a href="#" class="galleryb">Open Gallery 2</a>
<a href="#" class="galleryc">Open Gallery 3</a>

每个图库中应该有多个图像。这可能吗？如果是这样，怎么办？

Answer 1

您尚未指定您使用的是哪个版本的 Fancybox。假设是version 2 ，这就是您要查找的内容:FIDDLE .

基本上，您将所有图库图像保存在 Javascript 数组中。就像这样:

var images = {
    'gallerya': [
        {
            href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',                
            title : 'Gallery 1 - 1'
        },
        {
            href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',                
            title : 'Gallery 1 - 2'
        },
        {
            href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',                
            title : 'Gallery 1 - 3'
        }
    ],
    'galleryb': [
        {
            href : 'http://fancyapps.com/fancybox/demo/4_b.jpg',                
            title : 'Gallery 2 - 1'
        },
        {
            href : 'http://fancyapps.com/fancybox/demo/5_b.jpg',                
            title : 'Gallery 2 - 2'
        }
    ],
    ...
};

然后，您为图库开启器创建自定义点击处理程序，并使用所需的图库调用 $.fancybox.open 方法。检查fiddle查看详细信息。

$(".gallery-opener").click(function() {
    $.fancybox.open(images[$(this).data('gallery-id')], {
        padding : 0
    });

    return false;
});