0

请看下面的代码.. fansybox 某些原因只显示一张图片 - 第一张。第二张图片没有显示。我不明白为什么。

我阅读了教程，起初我尝试使用此代码http://jsfiddle.net/2k8EP/但此代码不适用于 ajax 和 jquery.infinitescroll 插件，fancybox 仅适用于在第一页上加载的图片和不适用于其他动态加载的页面。我的代码与 jquery.infinitescroll 插件配合得很好，但有一个问题：fancy 没有显示第二张图片。我需要像这样的 jsfiddle.net/2k8EP/ 代码，它可以与 jquery.infinitescroll 插件一起正常工作。对不起我的英语不好。谢谢！

ps jsfiddle.net/sxJgQ我的问题的示例代码

<a class="open_fancybox" href="images/cards/img_1370603520.jpg"><img  src="images/cards/img_1370603520.jpg" width="200" height="125" border=0></a>

$(document).ready(function(){ 
    $(".open_fancybox").fancybox([{
            href : 'images/cards/img_1370603520.jpg',                
            title : 'title1'
        },
    {
            href : 'images/cards/img_1370603521.jpg',                
            title : 'title2'
        },
    ], {
    helpers : {
        title: {
            type: 'inside'
            }
    },
        padding : 0,
    loop: false
    });

 });
4

1 回答 1

0

我从你的问题中不明白你到底想达到什么目的。请先阅读教程，它都包含在其中 - 例如这里：

http://fancyapps.com/fancybox/

但是如果你想要一些例子，我做了一个小提琴，你可以在这里查看：http: //jsfiddle.net/9tagE/。这是一个简单的解决方案，它会在点击另一个图像时打开一个图像。但是如果你想要一个有两张不同图片的画廊，你需要这样做：

<a class="open_fancybox" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">
    <img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg"/>
</a>
 <a class="open_fancybox" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg">
     <img  src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg"/>
</a>

你可以检查这个小提琴：http: //jsfiddle.net/eFPbe/

重要的：

请记住包含所有文件：

  1. jquery.fancybox.js
  2. jquery.fancybox.css
  3. jquery.fancybox-thumbs.css
  4. jquery.fancybox-thumbs.js

编辑：在这里你可以检查一个你可能尝试做的例子（从一张图片创建画廊）http://jsfiddle.net/2k8EP/

<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

$(".open_fancybox").click(function() {

    $.fancybox.open([
        {
            href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
            title : 'manual 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'
        }
    ], {
        nextEffect : 'none',
        prevEffect : 'none',
        padding    : 0,
        helpers    : {
            title : {
                type: 'over'  
            },
            thumbs : {
                width  : 75,
                height : 50,
                source : function( item ) {
                    return item.href.replace('_b.jpg', '_s.jpg');
                }
            }
        }
    });

    return false;
});
于 2013-10-11T09:34:39.257 回答