点击1个链接即可将多个图片库组合成Fancybox

Fancybox multiple image gallery within 1 link click

本文关键字：图片库 组合 Fancybox 1个 链接 点击      更新时间：2023-09-26

我正在尝试使用JQuery Fancybox制作一个简单的2图像库。点击小缩略图后，它会加载一个不同的、更大的图像，过一会儿，我想知道如何淡出/切换到另一个不同图像，然后可能在x段时间后循环回原始图像。此外，我该如何链接到这两个图像，它们应该在一个数组中？

<a class="fancyYoutube" href="Images/PosterChurchLarge.png"><img src="Images/3DChurchSmall.png"/></a>

是当前图像在html中的链接方式。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen">
<script type="text/javascript">
$(document).ready(function(){
$(".fancyYoutube").click(function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch''?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true
}
});
return false;
});
});
</script>

是fancybox定义的当前脚本。（我有一个通过fancybox显示的视频，这就是为什么这些功能是基于swf的。）

下面是一个例子http://jsfiddle.net/AwRk2/1/1.3.4版

3张照片的HTML代码将循环通过。只需使用2张照片，而不是3张。

<a rel="example_group" title="Custom title" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg">
        <img alt="" src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg" />
    </a>
    <a rel="example_group" title="" href="http://farm3.static.flickr.com/2591/4135665747_3091966c91.jpg">
        <img alt="" src="http://farm3.static.flickr.com/2591/4135665747_3091966c91_m.jpg" />
    </a>
    <a rel="example_group" title="" href="http://farm3.static.flickr.com/2561/4048285842_90b7e9f8d1.jpg">
        <img alt="" src="http://farm3.static.flickr.com/2561/4048285842_90b7e9f8d1_m.jpg" />
    </a>

然后这就是用来做这件事的fancybox代码

$("a[rel=example_group]").fancybox({
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'titlePosition'     : 'over',
        'cyclic'            : true,
        'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' +  (currentIndex + 1) + ' / ' + currentArray.length + ' ' + title + '</span>';
        }
    });
相关文章：