Basically what this does is fadeIn pre-existing divs and then loads an image. When the image is loaded it then appends that into one of the pre-existing divs. Then it appends a new div with an id of xButton. Then later it $('#xButton').click() should hide the 3 divs. However it just doesn't work. If I change the click() to either #modalImage or #overlay, it works but just not for the #xButton. I would really like to figure out why its not working and how I should be doing this instead. Thanks.
$(function(){
$('#container a').click(function(e){
e.preventDefault();
var id = $(this).attr('href'),
img = new Image();
$('#overlay').fadeIn(function(){
$('#modalImage').fadeIn();
});
$(img).load(function(){
$(this).hide();
$('#modalImage').removeClass('loader').append(this);
$(this).fadeIn(function(){
var ih = $(this).outerHeight(),
iw = $(this).outerWidth(),
newH = ($(window).height()/10)*7,
newW = ($(window).width()/10)*7;
if (ih >= iw && ih >= newH) {
$(this).css('height',newH + 'px');
$(this).css('width', 'auto');
}
else if (ih >= iw && newH > ih) {
$(this).css('height', ih + 'px');
$(this).css('width', 'auto');
}
else if (iw > ih && iw >= newW) {
if ((newW / (iw / ih)) > newH) {
$(this).css('width', 'auto');
$(this).css('height', newH + 'px');
}
else {
$(this).css('width', newW + 'px');
$(this).css('height', 'auto');
}
}
else {
$(this).css('width', iw + 'px');
$(this).css('height', 'auto');
}
var padW = ($(window).width() - $(this).outerWidth()) / 2,
padH = ($(window).height() - $(this).outerHeight()) / 2;
console.log (padH + ' ' + padW);
$(this).css('top', padH);
$(this).css('left', padW);
if($('#overlay').is(":visible") == true) {
ih = ih + 4;
$('<div id="xButton">x</div>').appendTo('#modalImage');
if (padH >= 0) {
$('#xButton').css('top', padH - 4).css('right', padW - 65);
}
else {
$('#xButton').css('top', '20px').css('right', padW - 65);
}
}
});
}).attr('src', id);
});
$('#xButton').click(function(){
$(this).hide();
$('#overlay').fadeOut(function(){
$('#modalImage img').css('top', '-9999px').remove();
$('#xButton').remove();
$('#modalImage').addClass('loader');
});
});
});
