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

jQuery Fancybox - 多个图库 - 多个打开按钮

1 个答案: