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

Question

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

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

Так я пытаюсь изменить «Загрузить» -LINK переодеваться с содержанием 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' } 
    },  
    });   
}); 

Используя этот скрипт изменил Ссылку прибудет, но он использует тот же ссылку/URL первого элемента для каждого элемента, это не связанно с щелкнули-элемент или к дочернему-div «bildlink» или щелкнутому элементу.

Вот скрипка для этого: http://jsfiddle.net/gEYtB/ (EDIT: 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 так вот почему. Вы должны быть ориентированы на каждый 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 селекторов