javascript - 来自同级容器的 FancyBox 标题

Question

我遇到了一个非常简单/愚蠢的问题，而且我缺乏 jQuery 知识也没有帮助。

原则上，我有一个包含多张图片的厨房，并且想使用同级-<div> - 使用 FancyBox 将一些 HTML 标记作为标题的 block 。这是我的问题的一个简单的说明:

HTML:

<div class="someClass">
  <a title="some title"
     class="fancybox"
     href="http://fancyapps.com/fancybox/demo/1_b.jpg">
    <img src="http://fancyapps.com/fancybox/demo/1_s.jpg"
         alt=""/>
  </a>
</div>

<div class="captionClass">
     this should be <br /> the <b>caption</b>
</div>

JavaScript:

$(".fancybox").fancybox({

  'beforeLoad' : function() {
     this.title = $(this).siblings('.captionClass').html();
  }

 });

任何帮助将不胜感激:)

Answer 1

您应该将函数更改为afterLoad

$(".fancybox").fancybox({
    afterLoad: function () {
        this.title = $(this.element).parent().siblings('.captionClass').html()
    },
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(58, 42, 45, 0.95)'
            }
        }
    }
});

演示:http://jsfiddle.net/6gvjsd9u/