Fancybox圖片庫

Question

我有iframe中的下一個代碼，我實現它獲取顯示在父，但現在我不知道我可以如何組合圖像畫廊在fancybox示例中的圖像。

我在例子中看到這一點：

$(document).ready(function() { 
$('.imagen').click(function(e){ 
e.preventDefault(); 
parent.$.fancybox([ 
{href:'images/01.jpg', title: '01'}, 
{href:'images/02.jpg', title: '02'}, 
{href:'images/03.jpg', title: '03'} 
],{ 
// href: this.href, 
helpers: { 
overlay: {............... 

，但我不希望因爲鏈接將是動態的。我想使用類似 $(".fancybox") .attr('rel', 'gallery')和使用它像

<a class="fancybox" rel="gallery" href="Lector.ashx?ImagenId=0" > 

實現看到與下一個按鈕作爲圖像庫的img，但我不我有什麼修改。

我的代碼：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fancybox').click(function (e) { 
      e.preventDefault(); 
      parent.$.fancybox({ 
       href: this.href, 
       helpers: { 
        title: { type: 'inside' }, 
        overlay: { 
         opacity: 0.3 
        } // overlay 
        //, buttons: {} 
       } // helpers 
      }); // fancybox 
     }); // click 
    }); 
</script> 

體

<a class="fancybox" href="Lector.ashx?ImagenId=14" > 
    <img alt="" src="../Resources/background.png" width="100" height="100"/> 
</a> 
<a class="fancybox" href="Lector.ashx?ImagenId=6"> 
<img alt="" src="Lector.ashx?ImagenId=6" width="100" height="100"/> 
</a> 
<a class="fancybox" href="Lector.ashx?ImagenId=20"> 
    <img alt="" src="Lector.ashx?ImagenId=6" width="100" height="100"/> 
</a> 

我使用的fancybox 2.1.3請幫我!!!! 在此先感謝

I have to do this? 
    $(document).ready(function() { 
     $('.fancybox').click(function (e) { 
    like i said before at start??? 
    });//click 
    $('.fancybox').attr('rel', 'gallery').fancybox({ 
     JFK code?? 
    }); 
    });// 

Answer 1

如果你有這些鏈接：

<a class="fancybox" href="Lector.ashx?ImagenId=14" > 
    <img alt="" src="../Resources/background.png" width="100" height="100"/> 
</a> 
<a class="fancybox" href="Lector.ashx?ImagenId=6"> 
    <img alt="" class="fancybox" src="Lector.ashx?ImagenId=6.jpg" width="100" height="100"/> 
</a> 
<a class="fancybox" href="Lector.ashx?ImagenId=20"> 
    <img alt="" src="Lector.ashx?ImagenId=6.jpg" width="100" height="100"/> 
</a> 

...注意，沒有人有一個形象的擴展，使的fancybox不知道是什麼內容type處理.. 。你需要使用type : "image" API選項來告訴它。檢查Fancybox documentationFAQ選項卡，第5號

你完整的代碼應該是這樣的：

$(document).ready(function(){ 
    $('.fancybox').attr('rel', 'gallery').fancybox({ 
      type : "image", // force type of content to image 
      helpers: { 
       title: { type: 'inside' }, 
       overlay: { 
        opacity: 0.3 
       } // overlay 
      } // helpers 
    }); // fancybox 
}); // ready 

編輯：我注意到，您還設置類fancybox在img標籤（第二個鏈接在你的代碼上面）如：

<img alt="" class="fancybox" .... 

...這可能會有意想不到的結果，所以下注從那裏刪除它。只有<a>標籤應具有類別fancybox。