我正在使用 Nivo Lightbox 插件。我也在用CMS surreal。我希望客户能够更改 Nivo Lightbox 幻灯片中图像的标题。幻灯片的标题在图像标签周围的 anchor 标签中给出,标题属性声明幻灯片上显示的标题:
<a href="images/1.jpg" title="Untitled 2013" data-lightbox-gallery="gallery1"><img src="images/1.jpg" /></a>
CMS 编辑器仅向客户端提供编辑图像 alt 属性的选项。因此我需要将 anchor 的标题属性交换为图像的 alt 标签。
问题:如何使幻灯片标题链接到图像标签的 alt 属性,而不是其周围 anchor 的 title 属性?
最佳答案
我在插件中找不到任何选项;在不更改 HTML(或 DOM 更改)的情况下,我的实际解决方案(但我认为可以改进)是使用 beforeShowLightbox
和 afterShowLightbox
事件来获取子 img alt
属性并将其设置在灯箱标题中。
代码:
var altText;
$(document).ready(function () {
$('#nivo-lightbox-demo a').nivoLightbox({
effect: 'fade',
beforeShowLightbox: function () {
altText = $($(this)[0].el).find('img').prop('alt');
},
afterShowLightbox: function (light) {
if (altText!=="") $($(light)[0]).find('.nivo-lightbox-title').html(altText);
}
});
});
关于javascript - 为灯箱幻灯片标题添加 alt 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22882041/