Fancybox - add link of hidden div to caption/title

Question

I use MODx Revo with Fancybox 2 to display images in the Lightbox-view. I have a hidden div for each image, that holds an url with a link.

I want the link to be shown in the Lightbox-View inside the caption/title, like in this example: http://jsfiddle.net/zAe6Z/

So I try to change the "Download"-Link to get changed with the content of the div with the class "bildlink":

<a class="album" rel="albumname" href="[[+image]]" title="[[+description]]">
<img src="[[+thumbnail]]" alt="[[+name]]" /></a>

<div style="display:none;" class="bildlink">
[[+url]]
</div>

The "variable" [[+url]] holds the url for the link that should get displayed in the Lightbox-view after the description.

I tried this script:

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

By using this script the Link get's changed, but it uses the same link/url of the first item for each item, it's not related to the clicked-element or to the child-div "bildlink" or the clicked-element.

Here's a fiddle for that: http://jsfiddle.net/gEYtB/ (EDIT: http://jsfiddle.net/gEYtB/2/)

So how do I get the content of the div "bildlink" of the clicked-element and use this for the link?

Any hints much appreciated!

EDIT: Have been researching and trying a lot, but no luck so far...i thought the "bildlink" must be written new on each click of an element, so i tried to implement it inside the "afterLoad"-function:

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

But this didn't work...

Answer 1

This variable

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

... will only get the first element with class bildlink so this is why. You need to target each bildlink selector according to the index of the clicked fancybox selector using the .eq() method like :

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

Notice that you still need to re-initialize the variable bildlink every time within the callback afterLoad, to set the proper index.

See forked JSFIDDLE

NOTE : this solution assumes that all .bildlink selectors follow the same consecutive order in the DOM as the .album selectors