0

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

<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 显示的视频，这就是这些功能基于 swf 的原因。）

4

1 回答 1

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>';
        }
    });
于 2013-06-26T23:52:06.707 回答