I created a view of thumbnails. When the user clicks, I want the real image to pop-up in a dialog. That works the first time, but once the jQuery 'click' fires on an thumbnail it never fires again unless I reload the entire page. I've tried rebinding the click events on the dialog close that that does not help. Here is my code:
function LoadGalleryView()
{
$('img.gallery').each(function(){
BindImage($(this));
});
}
function BindImage(image)
{
var src= image.attr('src');
var id= image.attr('id');
var popurl = src.replace("thumbs/", "");
image.hover(function(){
image.attr('style', 'height: 100%; width: 100%;');
}, function(){
image.removeAttr('style');
});
$('#'+id).live('click', function()
{
PopUpImage(popurl);
});
}
function CheckImage(img,html)
{
if ( img.complete )
{
$('#galleryProgress').html('');
var imgwidth = img.width+35;
var imgheight = img.height+65;
$('<div id="viewImage" title="View"></div>').html(html).dialog(
{
bgiframe: true,
autoOpen: true,
modal: true,
width: imgwidth,
height: imgheight,
position: 'center',
closeOnEscape: true
});
}
else
{
$('#galleryProgress').html('<img src="images/ajax-loader.gif" /><br /><br />');
setTimeout(function(){CheckImage(img,html);},10);
}
}
function PopUpImage(url)
{
var html = '<img src="'+url+'" />';
var img = new Image();
img.src = url;
if ( ! img.complete )
{
setTimeout(function(){CheckImage(img,html);},10);
}
}
PopUpImage() only executes the first time an image is clicked and I cannot figure out how to rebind.
