Fancybox-将隐藏div的链接添加到标题/标题中

Question

我使用MODx Revo和Fancybox 2在Lightbox视图中显示图像。我为每个图像都有一个隐藏的div，其中包含一个带有链接的url。

我希望链接显示在标题/标题内的Lightbox视图中，如本例所示：http://jsfiddle.net/zAe6Z/

因此，我尝试更改"下载"链接，以使用类"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，该链接应在描述之后的Lightbox视图中显示。

我试过这个脚本：

$(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，它与单击的元素或子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的第一个元素，所以这就是原因。您需要根据单击的fancybox选择器的index，使用.eq()方法(如：)将每个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选择器相同的连续顺序