Fancybox 3 将链接标题更改为数据标题

Posted 2023-05-09

【中文标题】Fancybox 3 将链接标题更改为数据标题

【英文标题】：Fancybox 3 change link title to data-caption

【发布时间】：2021-04-10 11:12:30

【问题描述】：

我想问你是否有任何javascript方法来获取链接标题并使用它或将其更改为fancybox 3中的data-caption？唯一的条件是链接标题是否存在。

这就是我现在拥有的：

<a data-fancybox="gallery" title="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>

我想以某种方式将其更改为：

<a data-fancybox="gallery" data-caption="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>

感谢大家的帮助。

【问题讨论】：

api.jquery.com/attr。请注意，您需要执行设置data-caption 属性的逻辑在实例化fancybox

【参考方案1】：

用一些JS代码来做

jQuery(function()
$('a[data-fancybox="gallery"]').each(function()
 if($(this).attr('title') != '' )
  $(this).attr('data-caption', $(this).attr('title'));
 
)
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-fancybox="gallery" title="some-title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
<a data-fancybox="gallery" title="title" href="big_1.jpg">
<img src="small_1.jpg">
</a>
<a data-fancybox="gallery"  href="big_1.jpg">
<img src="small_1.jpg">
</a>