Fancybox - добавить ссылку скрытого div в заголовок / заголовок

Question

Я использую MODx Revo с Fancybox 2 для отображения изображений в Lightbox-представлении. У меня есть скрытый div для каждого изображения, который содержит ссылку со ссылкой.

Я хочу, чтобы ссылка отображалась в Lightbox-View внутри заголовка / заголовка, как в этом примере: http://jsfiddle.net/zAe6Z/

Поэтому я пытаюсь изменить ссылку "Скачать", чтобы изменить содержимое div с классом "bildlink":

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

С помощью этого сценария Link Get изменяется, но он использует одну и ту же ссылку / URL первого элемента для каждого элемента, он не связан с clicked-элементом или дочерним div-элементом "bildlink" или clicked-элементом.

Вот скрипка для этого: http://jsfiddle.net/gEYtB/ (РЕДАКТИРОВАТЬ: http://jsfiddle.net/gEYtB/2/)

Итак, как мне получить содержимое div "bildlink" clicked-element и использовать его для ссылки?

Любые намеки очень ценятся!

РЕДАКТИРОВАТЬ: много исследовал и пытался, но пока не повезло... я думал, что "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 селектор в соответствии с index селектора fancybox, по которому щелкнули .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,

Смотрите раздвоенный JSFIDDLE

ПРИМЕЧАНИЕ: это решение предполагает, что все .bildlink селекторы следуют в том же порядке в DOM, что и .album селекторы