Модальные плагины jquery не работают с динамически загружаемыми изображениями - PullRequest
Новая
       18

Модальные плагины jquery не работают с динамически загружаемыми изображениями

0 голосов
/ 27 февраля 2011

Я динамически загружаю изображения из flickr с помощью API. Однако, когда я пытаюсь использовать colorbox, prettyphoto или другие модальные окна jquery - они не работают. Ссылка на увеличенное изображение открывает изображение только в новом окне.

Моя тестовая страница: http://www.thinquetanque.com/test/full/test.html#/advanced-usage

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

Мысли о том, как противодействовать?

спасибо!

Обновление:

пробовал использовать: 

$('.colorbox').live('click', function() { $.fn.colorbox({href:$(this).attr('href'), open:true}); return false; }

Это не сработало - но я попытался использовать его в своем flickr api - используя .live, как предложено ниже. API flickr, который я использую, использует .live для добавления атрибутов дочерним элементам div. 

 $('#wrapper').live('mouseover', function(){
                   $(this).children('p').attr('class', 'image-info');
                });

Но я не могу понять, как изменить вышеперечисленное для работы с colorbox. Я изменил указатель мыши на щелчок, но я не знаю, как добавить функцию colorbox, используя $ (this) .children

Ответы [ 3 ]

1 голос
/ 26 марта 2011

У меня возникли проблемы с тем же вопросом, и я, наконец, понял это!Добавление обработчика загрузки до получения src должно сделать это, просто вызвав функцию colorbox.С вашим кодом это будет выглядеть так: 

 ...
 $.getJSON('YOUR_JSON_URL_INFO', 
 function(data){

    $('#wrapper a').colorbox();

        //if the image has tags
        if(data.photo.tags.tag != '') { ...
0 голосов
/ 27 февраля 2011

Добавьте обработчик загрузки к каждому из изображений.В обработчике добавьте colorbox для каждого изображения, когда оно загружено.Чтобы это работало, вам нужно добавить обработчик и добавить его в DOM, прежде чем устанавливать src, в противном случае вы столкнетесь с проблемой загрузки образа перед обработчиком и, таким образом, возникновения события.Вы также можете пометить привязку как добавленную цветовую коробку и использовать таймер с достаточно длительным тайм-аутом, чтобы «догнать» любые изображения, загруженные до применения обработчика, если невозможно гарантировать, что обработчик активен перед изображениемначинает загрузку.

0 голосов
/ 27 февраля 2011

Ты прав. Изображения загружаются после связывания плагина. В jQuery у вас есть событие live () , оно похоже на событие bind () , за исключением того, что оно также работает с динамически загруженными элементами dom.

...