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

【问题标题】：Fancybox - add link of hidden div to caption/titleFancybox - 将隐藏 div 的链接添加到标题/标题
【发布时间】：2014-02-28 23:36:02
【问题描述】：

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

我希望链接显示在标题/标题内的灯箱视图中，例如：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，该链接应该在描述之后显示在灯箱视图中。

我试过这个脚本：

$(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' }
    },      
    });         
});

但这没有用......

【问题讨论】：

标签： javascript jquery fancybox fancybox-2 modx-revolution

【解决方案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 选择器相同的连续顺序

【讨论】：