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>

标题属性用于浏览器中的鼠标悬停事件，因此没有人看到html标记。当有人点击任何缩略图时，fancybox会打开一个弹出窗口，并且数字标题属性应该用于显示在其中的标题。

如何使用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

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

1 个答案: