在打开 Fancybox 弹出窗口之前为组中的每个图像设置标题？

Question

我使用fancybox2。以下是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 属性用于浏览器中的鼠标悬停事件，以便没有人看到 html 标签。当有人点击任何缩略图时，fancybox 会打开一个弹出窗口，其中显示的标题应使用 data-caption 属性。

fancybox 如何处理这种情况？我尝试了很多东西，但都没有奏效。以下是我尝试过的一件事：

   $(".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;
            });
        }
});

但是这个脚本为两张图片设置了相同的标题（caption-2-with-html）。这是 JSFiddle 演示：http://jsfiddle.net/mddc/ahLLcktx/8/

感谢和问候。

Answer 1

您遇到的问题是.each() 方法总是返回迭代的最后一个元素，因此任何图像上的标题都相同。

解决方案应该更简单，只需从当前元素中获取标题，例如：

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

查看你的分叉JSFIDDLE

...或更好：

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

JSFIDDLE