将alt属性添加到灯箱幻灯片标题吗? [英] Add the alt attribute to light box slideshow title?

问题描述

1. 我正在使用Nivo Lightbox插件.我也在使用CMS超现实主义.我希望客户能够在Nivo Lightbox幻灯片放映中更改图像的标题.幻灯片的标题在图像标签周围的锚标记中给出，并且title属性声明幻灯片上显示的标题:

1. I am using Nivo Lightbox plugin. I am also using CMS surreal. I want the clients to be able to change the title of the images in the Nivo Lightbox slideshow. The titles to the slideshow are given in the anchor tag that surrounds the image tag, with the title attribute declaring the title displayed on the slideshow:

 <a href="images/1.jpg" title="Untitled 2013" data-lightbox-gallery="gallery1"><img     src="images/1.jpg" /></a>

CMS编辑器仅向客户端提供编辑图像的alt属性的选项.因此，我需要将锚点的title属性交换为图像的alt标签.

The CMS editor only gives the client the option to edit the alt attribute of the image. Therefore I need to swap the title attribute of the anchor to the alt tag of the image.

问题:如何使幻灯片的标题链接到image标签的alt属性，而不是链接到其周围的锚点的title属性?

Question: How can I make the title of the slideshow link to the alt attribute of the image tag instead of the title attribute of the anchor surrounding it?

推荐答案

我在插件中找不到任何选项；不对HTML进行任何更改(或对DOM进行更改)，我的实际解决方案(但我认为可以改进)是使用beforeShowLightbox和afterShowLightbox事件获取子img alt属性并将其设置在灯箱标题中

I can't find any option in the plugin; without any change to the HTML (or DOM changes) my actual solution (but I think can be improved) is to use the beforeShowLightbox and afterShowLightbox events to get the child img alt attribute and set it in the lightbox title.

代码:

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属性添加到灯箱幻灯片标题吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！