Question

考虑这个标记：

<dl class="target">
<dt class="gallery-icon">
<a class="fancybox" rel="gallery1" href="1_b.jpg"><img src="1_s.jpg" alt="hello"/>
</a>
</dt>
<dd class="wp-description-2" style='display:none'>Image Caption #1</dd>

<dt class="gallery-icon">
<a class="fancybox" rel="gallery1" href="2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="hello"/>
</a>
</dt>
<dd class="wp-description-3" style='display:none'>Image Caption #2</dd>
</dl>

我想要获得的是为每个fancybox图像显示的不同标题。到目前为止，我已经提出了这个代码，但没有成功。我真的不太了解javascript。如果有人能帮助我做到正确，我将不胜感激。这是jQuery代码：

$(".fancybox").fancybox({
    beforeLoad: function() {
    var num_id = $('.target dd').attr('class').match(/\d+/);
    this.title = $(".wp-description-"+num_id).text();
}
});

JsFiddle链接：http://jsfiddle.net/vkDcG/1520/

谢谢

Answer 1

您好我编辑了您的小提琴，我希望这会对您有所帮助：

http://jsfiddle.net/vkDcG/1521/

beforeLoad: function() {

     var num_id = this.element.parents('dt').next('dd').text();
     this.title = num_id;
},

你应该替换：

 afterShow: function() {
    $(".fancybox-title").wrapInner('<div />').show();

    $(".fancybox-wrap").hover(function() {
        $(".fancybox-title").show();
    }, function() {
        $(".fancybox-title").hide();
    });
},

纯css

 .fancybox-title{
    display:none;
 }
 .fancybox-wrap:hover .fancybox-title{
    display:block;
 }

另一个小提琴的最终结果：

http://jsfiddle.net/vkDcG/1522/

根据类ID分配Fancybox标题

1 个答案: