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

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 属性用于浏览器中的 mouse-hover 事件，因此没有人会看到 html 标签。当有人点击任何缩略图时，fancybox 会打开一个弹出窗口 window 并且 data-caption 属性应该用于其中显示的标题。

我该如何使用 fancybox 处理这种情况？我尝试了很多方法，但其中 none 行得通。以下是我尝试过的一件事：

   $(".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() 方法总是 returns 迭代的最后一个元素，因此在任何图像上都有相同的标题。

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

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

看到你的分叉JSFIDDLE

...或更好：

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

JSFIDDLE

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

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

jquery

fancybox

fancybox-2