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 to 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 != '') { ...