Set the caption for each image in a group just before opening the Fancybox popup window?

Question

I use fancybox2. The following is html:

<a rel="example_group" class="fancybox" title="Custom title 1" data-caption="caption-1-with-html" href="full_path_to_image.jpg">
  <img alt="" src="path_to_image_thumbs.jpg">
</a>
<a rel="example_group" class="fancybox"  title="Custom title 2" data-caption="caption-2-with-html" href="full_path_to_image.jpg">
  <img alt="" src="path_to_image_thumbs.jpg">
</a>

Title attribute is for mouse-hover event in browsers so that no one sees html tags. When someone clicks on any of thumbnail images, fancybox opens a popup window and data-caption attribute should be used for the caption shown in it.

How can I handle this situation with fancybox? I tried many things but none of them worked. The following is one thing I tried:

   $(".fancybox")
        .fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            nextEffect: 'none',
            prevEffect: 'none',
            padding: [0, 0, 20, 0],
            margin: [20, 60, 20, 60],
        helpers : {
            title: {
                type: 'inside'
            }
        },
        beforeLoad: function() {
            var box = this;
            $(".fancybox").each(function(index, item) {
                var text = $(this).attr('data-caption');
                box.title = text;
            });
        }
});

But this script sets the same caption (caption-2-with-html) for both images. Here is the JSFiddle demo: http://jsfiddle.net/mddc/ahLLcktx/8/

Thanks and regards.

Answer 1

The issue you have is that the .each() method always returns the last element of the iteration, hence the same caption on any image.

The solution should be simpler, just get the caption from the current element like :

beforeLoad: function() {
    this.title = $(this.element).attr('data-caption');
}

See your forked JSFIDDLE

... or better :

beforeLoad: function() {
    this.title = $(this.element).data('caption');
}

JSFIDDLE