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/

4

1 回答 1

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属性并index相应地设置fancybox，否则从第一个元素开始画廊，所以：

$(".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

于 2013-06-03T18:10:08.237 回答