从多个预览图片开始一个画廊，与Fancybox2

Question

我开始一个画廊与多个预览图片（链接）。第一个在画廊开始，下一个到同一个画廊的特定照片，但是如果您愿意，您可以点击整个画廊。把它看作是一个设置书签，可以将你带到一个更大的图像库的不同点。

我已经复制了如何现在为我工作，虽然它是多余的，不是很有效。我只是假装它，以便整个事情循环。我很欣赏任何建议。

这里是链接：

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

Answer 1

您可以只使用一个脚本，一个类为您的所有链接。然后，您可以为任何链接添加（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; 
}); 

记住在javascr IPT的index数量总是0开始，这就是为什么我们做$(this).data("index") - 1

见分叉JSFIDDLE