fancybox只显示一组图片

Question

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

我阅读了教程，起初我尝试使用此代码http://jsfiddle.net/2k8EP/，但此代码不能与ajax和jquery.infinitescroll插件一起使用，fancybox仅适用于在第一页上加载而不能正常工作的图片对于其他动态加载的页面。 我的代码使用jquery.infinitescroll插件非常出色，但有一个麻烦：幻想没有显示第二张图片。 我需要像这样的代码jsfiddle.net/2k8EP/，它正确地与jquery.infinitescroll插件一起使用。 对不起我的英语不好。 日Thnx！

P.S。 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
    });

 });

Answer 1

我不明白你的问题到底想要实现什么。请先阅读教程，这些都包括在内 - 例如：

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;
});