多個畫廊的Fancybox自定義標題

1）我有一堆圖像在fancybox的兩個畫廊中分割。我使用下面的代碼將我的標題分成不同的行。我的HTML有一個單獨的div與標題，每個都在div中。它可以工作，但它同時爲兩個畫廊添加標題，因此圖片1在兩個畫廊中都獲得相同的名稱。多個畫廊的Fancybox自定義標題

如何爲我的兩個畫廊插入單獨的標題？

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
      openEffect : 'elastic', 
      closeEffect : 'elastic', 
      arrows : true, 
      helpers : { 
        title : { type : 'inside' }, 
        buttons : {} 
      }, // helpers 
      afterLoad : function() { 
       this.title = $("#fancyboxTitles div").eq(this.index).html(); 
      } // afterload 
    }); // fancybox 
}); // ready

2）當圖像出現多行標題時，我點擊「下一步」，然後返回，標題消失。我該如何解決這個問題？謝謝！

來源

2012-06-02 user1432772

你的代碼幾乎是我的posted here的副本，但是在寫這篇文章的時候，fancybox版本是2.0.1。自那時以來，一些更改已經完成（主要是改進和錯誤修復），因此我們需要對自定義腳本以及html結構進行一些更改。您可能還需要更新到的fancybox的最新版本（2.0.6今天）

假設你已經通過設置不同的rel屬性分組一樣的畫廊：

<a class="fancybox" rel="gallery1" href="images/01a.jpg">image 1 - gallery 1</a> 
<a class="fancybox" rel="gallery1" href="images/02a.jpg">image 2 - gallery 1</a> 

<a class="fancybox" rel="gallery2" href="images/01b.jpg">image 1 - gallery 2</a> 
<a class="fancybox" rel="gallery2" href="images/02b.jpg">image 2 - gallery 2</a> 
<a class="fancybox" rel="gallery2" href="images/03b.jpg">image 3 - gallery 2</a>

1）。組中不同的部門每家畫廊也像這樣的標題：

<div id="gallery1"> 
<div>title image 1/gallery 1</div> 
<div>title image 2/gallery 1</div> 
</div> 
<div id="gallery2"> 
<div>title image 1/gallery 2</div> 
<div>title image 2/gallery 2</div> 
<div>title image 3/gallery 2</div> 
</div>

重要：我已經分配了ID以等於每家畫廊的rel屬性父容器的通知。 2）。現在，對於2.0.6版本，我們不能使用afterLoad回調函數，就像我們在v2.0.1中所做的那樣（這是它使標題消失）....我們將使用beforeShow來代替。

所以更換腳本的這一部分：

afterLoad : function() { 
this.title = $("#fancyboxTitles div").eq(this.index).html(); 
} // afterload

本：

beforeShow : function() { 
var gallery = $(this.element).attr("rel"); 
this.title = $("#"+gallery+" div").eq(this.index).html(); 
} // beforeShow

這應該做的伎倆。

PS。我會爲v2.0.6的其他帖子添加備註

來源

2012-06-03 08:07:36 JFK

非常感謝JFK！它完美的工作！ – user1432772

多個畫廊的Fancybox自定義標題

回答

相關問題