打開多個的fancybox畫廊鏈接

Question

我已經嘗試在How do I open fancybox via manual call for a gallery in the html not via the jquery options?所提供的解決方案轉換，以便將其應用於多個畫廊，但不能讓它正常工作。

我有什麼是具有以下屬性的幾個環節：

<a href="#" class="open-album" data-open-id="album-1">Album 1</a> 
<a href="#" class="open-album" data-open-id="album-2">Album 2</a> 

等

這些都應該適用於各自啓用的fancybox，相冊，例如：

<a href="#" class="image-show" rel="album-1"><img src="#" /></a> 
<a href="#" class="image-show" rel="album-1"><img src="#" /></a> 
<a href="#" class="image-show" rel="album-1"><img src="#" /></a> 

和

<a href="#" class="image-show" rel="album-2"><img src="#" /></a> 
<a href="#" class="image-show" rel="album-2"><img src="#" /></a> 
<a href="#" class="image-show" rel="album-2"><img src="#" /></a> 

Fancybox尋找.image-show類，並在圖像本身被點擊時正常工作。

以下的jQuery代碼應該在各自的專輯的專輯標題鏈接到第一圖象：

$('.open-album').click(function(e) { 
    var el, id = $(this.element).data('open-id'); 
    if(id){ 
     el = $('.image-show[rel=' + id + ']:eq(0)'); 
     e.preventDefault(); 
     el.click(); 
    } 
}); 

正如你可以看到，我們的目標是從專輯標題獲得data-open-id，並用它打開第一個Fancybox項目，其值爲rel屬性。唉，它不起作用。有什麼想法可能會出錯？非常感謝您的幫助！

在此先感謝！

Answer 1

我假設你選擇.image-show到的fancybox結合，不是嗎？

$(".image-show").fancybox(); 

如果是這樣，你的代碼的問題是，$(this.element)應使用within fancybox callbacks only，但由於您使用的是普通的jQuery方法（.click()），那麼你應該參考當前元素像$(this)

$('.open-album').click(function(e) { 
    var el, id = $(this).data('open-id'); 
    if(id){ 
     el = $('.image-show[rel=' + id + ']:eq(0)'); 
     e.preventDefault(); 
     el.click(); 
    } 
}); 

請參閱JSFIDDLE