根据类ID分配Fancybox标题

Assign Fancybox title depending on class ID

本文关键字：Fancybox 标题 分配 ID      更新时间：2023-09-26

考虑这个标记：

<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/

感谢

你好，我编辑了你的小提琴，我希望这能帮助你：

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/

相关文章：