Добавить атрибут alt в заголовок слайд-шоу светового короба?

Question

1. Я использую плагин Nivo Lightbox. Я также использую CMS сюрреалистично. Я хочу, чтобы клиенты могли изменять заголовок изображений в слайд-шоу Nivo Lightbox. Заголовки слайд-шоу приведены в теге привязки, который окружает тег изображения, с атрибутом title, объявляющим заголовок, отображаемый в слайд-шоу:

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

2. Редактор CMS только дает клиенту возможность редактировать атрибут alt изображения. Поэтому мне нужно поменять атрибут title якоря на тэг alt изображения.

Вопрос: Как сделать заголовок ссылки слайд-шоу с атрибутом alt тега изображения вместо атрибута 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/

Answer 2

Чтобы не менять CMS ни код Lightbox, я бы использовал watch плагин, чтобы быть замеченным всякий раз, когда alt атрибут изменился и после этого изменения title приписывать.

Answer 3

С помощью 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')); }