my lightbox doesn't work in IE8+
Hi, Can anyone look at my code and tell me why it doesn't work in ie? ehh thanks a lot!
(function($){
$.fn.center = function(){
return this.each(function(){
$(this).css({
'top': ($(window).height() - $(this).height())/2 + $(window).scrollTop()+"px",
'left': ($(window).width() - $(this).width())/2 + $(window).scrollLeft()+"px"
});
});
}
$.fadePage = function(param){
var defaults = {
action: 'fadein',
opacity: 0.9,
color: '#fff',
zindex: 9999,
speed: 500,
effect: 'linear',
onclick: function(){},
complete: function(){}
};
var options = $.extend(defaults, param);
if(options.action == 'fadein'){
var $fader = $('<div>')
.attr('id', 'MyPageFaderLayer')
.css({
'opacity': options.opacity,
'width': $(document).width(),
'height': $(document).height(),
'background-color': options.color,
'position': 'absolute',
'left': '0px',
'top': '0px',
'z-index': options.zindex,
'cursor': 'pointer',
'display': 'none'
})
.click(options.onclick)
.appendTo($('body'))
.fadeIn(options.speed, options.effect, options.complete);
}else if(options.action == 'fadeout'){
$('div#MyPageFaderLayer')
.fadeOut(options.speed, options.effect, function(){
$(this)
.unbind('click')
.remove();
})
}
}
$.fn.myLightBox = function(){
function closeLightBoxGallery(){
$('#myLightBoxGalleryContainer').fadeOut("medium", function(){
$(this).remove();
$.fadePage({action: 'fadeout'});
})
}
return this.each(function(){
$('a', this).live('click', function(){
var imageAlt = $('img', this).attr('alt');
var imageSrc = $(this).attr('href');
var imageGallery = $(this).attr('rel');
$.fadePage({
onclick: closeLightBoxGallery,
complete: function(){
var $divContainer = $('<div>')
.attr('id', 'myLightBoxGalleryContainer')
.css({
'position': 'absolute',
'z-index': '9999',
'background-color': '#fff',
'padding': '10px'
})
.center();
var $imgCloseContainer = $('<img>')
.attr({
'src': 'img/close.png',
'alt': 'close container'
})
.css({
"position": "absolute",
"margin-top": "-25px",
'opacity': '0.0',
"cursor": "pointer"
})
.one('click', closeLightBoxGallery);
var $imgContainer = $('<img>')
.attr('src', 'img/ajax-loader.gif')
.css('background-color', '#fff');
$('body').append(
$divContainer
.append($imgCloseContainer)
.append($imgContainer)
);
$(window).scroll(function(){
$divContainer.center();
});
var ImageObj = new Image();
ImageObj.src = imageSrc;
ImageObj.onload = function(){
var ImageSrc = this.src;
var ImageW = this.width;
var ImageH = this.height;
setTimeout(function(){
$divContainer.animate({
'left': ($(document).width() - ImageW)/2+"px",
'top': ($(window).height() - ImageH)/2 + $(window).scrollTop() + "px"
}, "slow", function(){
$imgCloseContainer.css({
'opacity': 1.0,
'margin-left': parseInt($divContainer.width())+15+"px"
});
});
$imgContainer.animate({
'width': ImageW,
'height': ImageH
}, "slow", function(){
var $imgAltContainer = $('<div>')
.html(imageAlt)
.appendTo($divContainer)
.css({
'display': 'none',
'text-align': 'left',
'font-size': '13px',
'padding': '10px',
'font-family': 'Arial'
})
.slideDown("fast");
})
$imgContainer.attr('src', ImageSrc);
}, 2000);
}
}
});
return false;
})
});
}
})(jQuery);