Плагин PrettyPhoto Jquery, используйте span вместо привязки и добейтесь тех же результатов

Я использую плагин PrettyPhoto Jquery в качестве лайтбокса для отображения изображений на моем сайте, когда пользователь щелкает миниатюру, изображение появляется в оверлее DIV.

По умолчанию PrettyPhoto работает с якорными ссылками (<a>), которые окружают изображение. В анкоре есть ссылки на исходный размер/увеличенную версию изображения. Я не хочу использовать тег <a>, потому что предпочитаю, чтобы эти изображения не индексировались и не использовали nofollow. Есть ли возможность заменить <a>, например, и добиться тех же результатов?

Я пробовал это сам, но он не запускал наложение div с исходным изображением, как предполагалось. Может быть, есть что-то, что я могу сделать в коде, чтобы заставить его работать.

Опять же, не хочу:

 <a href="original-image.jpg"><img src="thumb,jpg /></a>

Хотите:

 <span data-source="original-image.jpg"><img src="thumb.jpg /></span>

Исходный файл плагина Jquery без сжатия можно загрузить по этой ссылке

Другая альтернатива, которая может быть хорошей, — сохранить привязку, но использовать href="#" и поместить исходный URL-адрес изображения в другой атрибут, например «источник данных», и прочитать его оттуда. Это даже лучший вариант.

Спасибо


jquery lightbox prettyphoto
person Idan Shechter    schedule 16.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте изменить эту строку в плагине

pp_images = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return $(n).attr('href'); }) : $.makeArray($(this).attr('href'));

to

pp_images = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return $(n).attr('data-source'); }) : $.makeArray($(this).attr('data-source'));

РЕДАКТИРОВАТЬ: и

set_position = jQuery.inArray($(this).attr('href'), pp_images); // Define where in the array the clicked item is positionned

to

set_position = jQuery.inArray($(this).attr('data-source'), pp_images); // Define where in the array the clicked item is positionned
person devnull69    schedule 16.10.2012
comment
Он запускает лайтбокс, но показывает загрузчик ajax без изображения. - person Idan Shechter; 16.10.2012
comment
вы были правы на 90%, просто также нужно изменить это и здесь: set_position = jQuery.inArray($(this).attr('data-source'), pp_images); (СТРОКА 160) - обновить ответ. - person Idan Shechter; 16.10.2012
comment
@ devnull69 Я пытался использовать красивое фото. Вы знаете, как заблокировать прокрутку на теле, когда лайтбокс включен? а также изменить размер светового окна (т. е. не ограничиваться размером экрана?). Я пытаюсь получить функциональность в стиле pinterest. - person aVC; 19.10.2012