Question

我正在使用Nivo Lightbox插件。我也在使用CMS超现实主义。我希望客户能够在Nivo Lightbox幻灯片中更改图像的标题。幻灯片的标题在图片标记周围的锚标记中给出，标题属性声明幻灯片上显示的标题：
```
 <a href="images/1.jpg" title="Untitled 2013" data-lightbox-gallery="gallery1"><img     src="images/1.jpg" /></a>
```
CMS编辑器仅为客户端提供编辑图像alt属性的选项。因此，我需要将锚的title属性交换为图像的alt标记。

问题：如何将幻灯片链接的标题链接到图像标记的alt属性而不是围绕它的锚点的title属性？

Answer 1

使用jquery： $('[data-lightbox-gallery] img').attr('alt', $('[data-lightbox-gallery] img').parent().attr('title'));

后来编辑：我不知道我是否想念你，但似乎你想要完全相反的事情我写道：

$('[data-lightbox-gallery]').each(function(){ $(this).attr('title', $(this).children('img').attr('alt')); }

Answer 2

要不更改CMS既不是Lightbox插件代码，我会使用watch plugin在alt属性发生更改时以及在更改title属性后发现。

Answer 3

我在插件中找不到任何选项;在没有对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/

将alt属性添加到灯箱幻灯片标题？

3 个答案: