Question

我正在尝试将标题属性加载到FancyBox安装上的弹出库图像中。因为图库是从页面上的标签动态加载的，所以我无法将标题直接放在它们上面。此外，当我将title属性添加到标记时，它仅用于可见标题。

我需要的是一种将库标签上使用的标题添加为实际展开图像的标题属性的方法。我需要这个的唯一原因是因为Pinterest在使用Pinterest按钮时使用title属性来填充描述。

我在页面上的代码是：

<div id="gal1180">
 <a href=“/path_to_image.jpg" class="fancybox" rel="gal1180" caption=“Test caption“>1</a>
 <a href=“/path_to_image_2.jpg" class="fancybox" rel="gal1180" caption=“Test caption 2“>2</a>
 <a href=“/path_to_image_3.jpg" class="fancybox" rel="gal1180" caption=“Test caption 3“>3</a>
</div>

我用来启动FancyBox的代码是：

$('.fancybox').fancybox({
    helpers: {
        overlay: {
            locked: false
        }
    },
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    },
    afterShow: function() {
        touchSupport();
    }
});

对此的任何帮助将不胜感激。

Answer 1

试试这个

    beforeLoad: function() {
        $(this).attr("title", $(this).attr('caption'));
    }

或者如果在此上下文中元素在this.element

中

    beforeLoad: function() {
        $(this.element).attr("title", $(this.element).attr('caption'));
    }

但是如果dom没有加载到＆＃34; beforeLoad＆＃34;在AfterShow中试试这个

afterShow: function() {
    touchSupport();
    $(this.element).attr("title", $(this.element).attr('caption'));
    // or $(this).attr("title", $(this).attr('caption'));
}

<强> 编辑：

试试这个

$("#gal1180").fancybox({
    ...
    onComplete: function() {
         $(".fancybox").each(function() {
            $(this).attr("title", $(this).attr("caption"));
         });
    }
});

Answer 2

感谢Fylde帮助提出一些想法。这最终有效。

$('.fancybox').fancybox({
    afterShow: function() {
        $(".fancybox-image").attr("title", $(this.element).attr('caption'));
    }
});

希望将来可以帮助其他人。

Answer 3

这对我有用。

fancybox图片：

 <a id="mbimageref" href="" data-fancybox data-caption="" data-close-btn- 
 text="X">path to your image.....</a>

用于动态加载字幕的脚本

 <script>
 var plaintext = "whatever your want the caption to be";
 $("#mbimageref").attr('data-caption',plaintext);   
 </script>

如何将Title属性发送到FancyBox库图像？

3 个答案: