javascript - 为灯箱幻灯片标题添加 alt 属性？

Question

1. 我正在使用 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>
   

2. CMS 编辑器仅向客户端提供编辑图像 alt 属性的选项。因此我需要将 anchor 的标题属性交换为图像的 alt 标签。

问题:如何使幻灯片标题链接到图像标签的 alt 属性，而不是其周围 anchor 的 title 属性？

Answer 1

我在插件中找不到任何选项；在不更改 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);
        }
    });
});

演示:http://jsfiddle.net/IrvinDominin/MH8mu/