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