如何将“标题”属性发送到FancyBox库图像

How to send a Title attribute to a FancyBox gallery image?

本文关键字：FancyBox 图像 属性 标题      更新时间：2023-09-26

我正在尝试将标题属性加载到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();
    }
});

如有任何帮助，我们将不胜感激。

试试这个

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

或者如果在这种情况下元素在这个元素内

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

但是，如果dom没有在"beforeLoad"中加载，请在显示后尝试此操作

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"));
         });
    }
});

感谢Flyde提供的一些想法。这最终奏效了。

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

希望这对将来的其他人有所帮助。

这对我有效。

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>
相关文章：