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

时间:2013-06-03 16:46:48

标签: javascript jquery fancybox fancybox-2

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

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

以下是链接:

<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/

1 个答案:

答案 0 :(得分:0)

您可以只使用一个脚本,并为所有链接使用一个。然后,您可以向任何链接添加(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

的原因

请参阅分叉 JSFIDDLE