Fancybox - 將隱藏div的鏈接添加到標題/標題

Question

我使用MODX Revo和Fancybox 2在燈箱視圖中顯示圖像。我爲每個圖像都有一個隱藏的div，其中包含鏈接的網址。

我想要顯示鏈接的燈箱 - 查看字幕/標題裏面，就像這個例子：http://jsfiddle.net/zAe6Z/

所以我試圖改變「下載」 -Link獲得與內容改變用類「bildlink」的DIV：

<a class="album" rel="albumname" href="[[+image]]" title="[[+description]]"> 
<img src="[[+thumbnail]]" alt="[[+name]]" /></a> 

<div style="display:none;" class="bildlink"> 
[[+url]] 
</div> 

的「變量」 [[+ URL]適用於，應該讓顯示在說明之後燈箱視圖鏈接的URL。

我想這個腳本：

$(document).ready(function() { 

bildlink = $('div.bildlink').html();  

$(".album").fancybox({  
    cyclic : 'false', 
     afterLoad: function() { 
     this.title = this.title + '<a target="_blank" href="' + bildlink + '">' + bildlink + '</a> '; 
    }, 
    helpers : { 
     title : { type: 'inside' } 
    },  
    });   
}); 

通過使用這個腳本的鏈接獲取的變化，但它使用的第一個項目相同的鏈接/ URL每個項目，它不涉及到被點擊的元素或到child-div「bildlink」或點擊元素。

下面是一個小提琴：http://jsfiddle.net/gEYtB/（編輯：http://jsfiddle.net/gEYtB/2/）

那麼，如何讓DIV被點擊的元素的「bildlink」，並使用這個鏈接的內容？

任何提示非常感謝！

編輯：一直在研究和嘗試了很多，但沒有運氣，迄今爲止......我認爲「bildlink」必須寫在每個元素的每次點擊新，所以我試圖在「afterLoad」 - 功能：

$(document).ready(function() { 

$(".album").fancybox({  
    cyclic : 'false', 
     afterLoad: function() { 
     bildlink = $this.next('div.bildlink').html(); 
     this.title = this.title + '<a target="_blank" href="' + bildlink + '">' + bildlink + '</a> '; 
    }, 
    helpers : { 
     title : { type: 'inside' } 
    },  
    });   
}); 

但這並沒有工作...

Answer 1

這個變量

bildlink = $('div.bildlink').html(); 

...將只與bildlink類獲得的第一個元素，所以這是爲什麼。你需要根據使用.eq()方法類似點擊的fancybox選擇的index每個bildlink選擇目標：

jQuery(document).ready(function ($) { 
    $(".album").fancybox({ 
     cyclic: 'false', 
     afterLoad: function() { 
      var bildlink = $('div.bildlink').eq(this.index).html(); 
      this.title = this.title + ' <a target="_blank" href="' + bildlink + '">' + bildlink + '</a> '; 
     }, 
     helpers: { 
      title: { 
       type: 'inside' 
      } 
     }, 
    }); // fancybox 
}); // ready 

注意，你仍然需要回調afterLoad內的可變bildlink每次重新初始化，設置正確的index。

見分叉JSFIDDLE

注意：此解決方案假定所有.bildlink選擇遵循相同的連續順序在DOM爲.album選擇