jquery modal plugins not working on dynamically loaded images

I'm dynamically loading images from flickr using the api. However, when I try to use colorbox, prettyphoto, or other jquery modal windows - they don't work. The link to the larger image only opens the image in a new window.

My test page: http://www.thinquetanque.com/test/full/test.html#/advanced-usage

I'm assuming it's due to the modal plugin loading before the images have finished being pulled.

Thoughts on how to counteract?

thanks!

Update:

tried using:

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

That didn't work - but I tried to use within my flickr api - using .live as suggested below. The flickr api I am using uses .live to add attributes to the children of the div.

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

But I can't figure out how to change the above to work with colorbox. I changed the mouseover 开发者_如何学Pythonto click, but I don't know how to add the colorbox function using $(this).children

I was having trouble with this same question and finally figured it out! Adding a load handler before the getting the src should do it by simply calling the colorbox function. With your code, it'd look like this:

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

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

        //if the image has tags
        if(data.photo.tags.tag != '') { ...

Add a load handler to each of the images. In the handler add the colorbox to each image as it is loaded. To make this work you'll need to add the handler and add it to the DOM before you set the src, otherwise you run into an issue with the image loading before the handler and thus having the event not occur. You could also mark the anchor as having the colorbox added and use a timer with a suitably long timeout to "catch up" with any images that got loaded before the handler was applied if it's not possible to guarantee that the handler is live before the image starts loading.

You're right. The images are loaded after the plugin is binded. In jQuery you have the live() event, it's similar tot he bind() event, except it also works with dynamically loaded dom elements.