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选择