Question

我正在尝试使用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的。）

Answer 1

以下是一个示例和工作小提琴http://jsfiddle.net/AwRk2/1/ Ver 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>';
        }
    });

Fancybox多个图库在1个链接点击

1 个答案: