2014-04-05 4 views
1
  1. Я использую плагин Nivo Lightbox. Я также использую сюрреализм CMS. Я хочу, чтобы клиенты могли изменять название изображений в слайд-шоу Nivo Lightbox. Названия в слайд-шоу приведены в якорный тег, который окружает тег изображения с атрибутом название объявляя название, отображаемое на слайд-шоу:Добавьте атрибут alt в заголовок слайд-шоу Light Box?

    <a href="images/1.jpg" title="Untitled 2013" data-lightbox-gallery="gallery1"><img  src="images/1.jpg" /></a> 
    
  2. Редактор CMS только дает клиенту возможность редактирования альт атрибут изображения. Поэтому мне нужно поменять атрибут title якоря на тег alt изображения.

Вопрос: Как я могу сделать название ссылки слайд-шоу в атрибуте АЛТ изображения тега вместо атрибута заголовка якоря вокруг него?

ответ

0

Я не могу найти какой-либо вариант в плагине; без каких-либо изменений в HTML (или изменениях DOM) мое фактическое решение (но я думаю, можно улучшить) - использовать события beforeShowLightbox и afterShowLightbox, чтобы получить атрибут child 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/

+0

спасибо, я пытаюсь использовать ваш код, но он не работает для меня. Возможно, вы можете взглянуть на мою страницу и посмотреть, что я делаю неправильно. Http://intelligen.info/pro%20templates/template%20grid%20center/ – angela

+0

@angela Хорошо, я вижу, что легенда не создана, можете ли вы попробуйте установить значение   в атрибуте title? –

+0

отлично, что сработало !! Спасибо – angela

0

с JQuery: $('[data-lightbox-gallery] img').attr('alt', $('[data-lightbox-gallery] img').parent().attr('title'));

Позже изменения: я не знаю, если я missunderstood вас, но кажется, что вы хотели именно обратную вещь, которую я написал:

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

+0

[ '.prop()' 'против .attr()'] (http://stackoverflow.com/a/5876747/247893) – h2ooooooo

+1

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

0

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