使用Fancybox2从多个预览图片开始一个图库 [英] Starting one gallery from multiple preview pictures, with Fancybox2

问题描述

我正在用多个预览图片(链接)开始一个画廊.第一个开始画廊，下一个进入同一画廊中的特定照片，但是如果您愿意，可以单击整个画廊.可以将其视为设置书签，将您带到一个较大的图像库的不同位置.

I'm starting one gallery with multiple preview pictures (links). The first one begins the gallery, the next goes to a specific photo in the same gallery, but you can click through the entire gallery if you choose to. Think of it as a set up bookmarks that take you to different points of one larger gallery of images.

我已经复制了它现在对我的工作方式，尽管它是多余的并且效率不高.我只是在伪造它，以便整个事情循环.我感谢任何建议.

I've replicated how this is working for me now, though it's redundant and not very efficient. I'm merely faking it so that the entire thing loops. I appreciate any advice.

以下是链接:

<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(第二个链接以不同的顺序显示图像):

Here is the redundant Javascript (showing the images in a different order for the second link):

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

推荐答案

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

You could use a single script only and a single class for all your links. Then you could add a (HTML5) data-index attribute to any of your links to set what picture it should start the gallery from.

例如，如果您希望第二个链接从第三张图片开始画廊，则可以执行以下操作:

For instance, if you want the second link to start the gallery from the 3rd image you could do :

<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，否则从第一个元素开始画廊，因此:

Then in your script, detect if the link has the data-index attribute and set the fancybox index accordingly, otherwise start the gallery from the first element, so :

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

Remember that in javascript, the index number always starts with 0, this is why we did $(this).data("index") - 1

请参阅分叉的 JSFIDDLE

See forked JSFIDDLE

这篇关于使用Fancybox2从多个预览图片开始一个图库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！