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

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

我希望链接显示在标题/标题内的Lightbox视图中，如本例所示：

因此，我尝试更改“下载”链接，以使用类“bildlink”更改div的内容：

[+url]]

“变量”[+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' }
    },      
    });         
});

$（文档）.ready（函数（）{
bildlink=$（'div.bildlink'）.html（）；
$（“.album”）.fancybox（{
循环：“假”，
后加载：函数（）{
this.title=this.title+“”；
},
助手：{
标题：{type:'inside'}
},      
});         
});

通过使用此脚本，链接get被更改，但它为每个项目使用了第一个项目的相同链接/url，它与单击的元素或子div“bildlink”或单击的元素无关

这里有一把小提琴：（编辑：）

那么，如何获取单击元素的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' }
    },      
    });         
});

$（文档）.ready（函数（）{
$（“.album”）.fancybox（{
循环：“假”，
后加载：函数（）{
bildlink=$this.next（'div.bildlink'）.html（）；
this.title=this.title+“”；
},
助手：{
标题：{type:'inside'}
},      
});         
});

但这不起作用…

这个变量

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

。。。将只获取类为

bildlink

的第一个元素，这就是原因。您需要根据单击的fancybox选择器的

索引，使用
.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

jQuery（文档）.ready（函数（$）{
$（“.album”）.fancybox({
循环：“假”，
后加载：函数（）{
var bildlink=$（'div.bildlink'）.eq（this.index.html（）；
this.title=this.title+“”；
},
助手：{
标题：{
类型：“内部”
}
},
})；//fancybox
}); // 准备好的

注意在回调
后加载
中，您仍然需要每次重新初始化变量
bildlink
，以设置正确的
索引

见分叉

注意：此解决方案假定所有
.bildlink
选择器在DOM中遵循与
.album
选择器相同的连续顺序

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