Затвор перезагружен для галереи Next-Gen - меньшие изображения и заголовок из атрибута alt

Question

Извините, если этот вопрос неуместен, но я не нашел никакой информации о нем в других местах в сети ...: - (

Итак, у меня есть лайтбокс javascript Shutter-box, который мне нужно изменить.

Сценарий Shutterbox здесь (уже немного настроен): http://pastebin.com/g5qTF86H

Страница, на которой он используется: http://www.mrsherskin.com/collections/subconscious-levitation

1). По умолчанию этот скрипт не принимает альт изображений, которые он использует для лайтбокса, а только атрибут title. Я хотел бы установить переменную в этом скрипте, чтобы поместить атрибут alt изображения в качестве заголовка над картинкой. Я бы использовал этот скрипт jQuery для его вставки в инициализацию showImg, но я не знаю, как мне установить переменную, которая вставляет этот тег alt, считанный из соответствующих изображений:

var ImgTitle = jQuery('<div id="img-title"><h1 class="entry-title">Alt title</h1></div>');
jQuery(ImgTitle).appendTo('#shWrap');

2.) Я хотел бы приспособить размер показанного изображения так, чтобы под ним могли поместиться 2-3 строки текста описания. К сожалению, я не нашел ту часть скрипта, которая рассчитывает размер изображения в лайтбоксе, где его можно изменить?

Любая помощь, пожалуйста? Заранее спасибо.

Answer 1

Большое спасибо за ответ о том, как получить атрибут изображения alt, он отлично сработал для меня! Я был немного озадачен тем, где разместить предоставленный вами код, поэтому в случае, если у кого-то еще будет такая же проблема, я надеюсь, что смогу помочь прояснить.

Найдите следующий фрагмент кода (должен быть около строки 68 в файле shutter-reloaded.js, который находится в папке с шторками плагина NextGen Gallery):

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}

Измените эту строку следующим образом:

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}

Непосредственно над той строкой, которую вы только что изменили, добавьте следующее:

ALT = jQuery(L).children('img').attr('alt');

Затем я нашел следующую строку:

NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

И изменил это на:

NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

Надеюсь, это поможет!

-RG

Answer 2

ОК, я нашел решения:

(1) Я извлек альтернативные изображения из ссылок на shutterbox с помощью этого метода jQuery:

ALT = jQuery(L).children('img').attr('alt');

Добавлен в объект shutterLinks:

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}

Затем вставил эту переменную в новый объект jQuery под функцией make:

var ImgTitle = jQuery('<div id="img-title"><h1>' + shutterLinks[ln].alt + '</h1></div>');
jQuery(ImgTitle).prependTo('#shWrap');

(2) Я нашел часть, которая уменьшает большие изображения (если размер изображения больше, чем размер области просмотра), и добавил в конце сокращение на 30 px

TI.style.width = (TI.width - 30) + 'px'; // add side padding
TI.style.height = (TI.height - 30) + 'px'; // add bottom padding

---

Обновление, предложенное Рейчел :

Чтобы ввести этот код, выполните следующие действия:

Найдите следующий фрагмент кода (должен быть около строки 68 в файле shutter-reloaded.js, который находится в папке с шторкой плагина NextGen Gallery):

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T}

Измените эту строку следующим образом:

shutterLinks[i] = {link:L.href,num:inset,set:setid,title:T, alt: ALT}

Непосредственно над той строкой, которую вы только что изменили, добавьте следующее:

ALT = jQuery(L).children('img').attr('alt');

Затем найдите следующую строку:

NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

И измените это на:

NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].alt + '</div><div id="shCaptionLine">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';