Question

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

我希望链接显示在标题/标题内的灯箱视图中，如下例所示：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]]包含应在说明后在灯箱视图中显示的链接的网址。

我试过这个剧本：

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

通过使用此脚本，Link get已更改，但它使用每个项目的第一个项目的相同链接/ url，它与clicked-element或child-div“bildlink”或clicked-element无关

这是一个小提琴：http://jsfiddle.net/gEYtB/（编辑：http://jsfiddle.net/gEYtB/2/）

那么如何获取clicked-element的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的第一个元素，所以这就是原因。您需要使用bildlink方法根据所点击的fancybox选择器的index定位每个.eq()选择器，如：

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

注意您仍需要在回调bildlink内每次重新初始化变量afterLoad，以设置正确的index。

参见forked JSFIDDLE

注意：此解决方案假设所有.bildlink选择器都遵循DOM中相同的连续订单作为.album选择器

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

1 个答案: