As some may know, IE 5.5+ has considerable problems handling .PNG's, whether it be displaying them, fading them in and out, etc. The problem that I am having is how to integrate the IE progid filter fix inside a jquery gallery that I'm using authored by a developer by the name of Jeffrey Fry.
The fix is as follows grabbed from another stackoverflow post:
/* IE PNG fix multiple filters */
(function ($) {
if (!$) return;
$.fn.extend({
fixPNG: function(sizingMethod, forceBG) {
if (!($.browser.msie)) return this;
var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here
sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
this.each(function() {
var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
if (isImg) this.src = emptyimg;
else this.style.backgroundImage = "url(" + emptyimg + ")";
});
return this;
}
});
})(jQuery);
Since the jQuery gallery source code developed by aforementioned author is public, I will post the section of the code I believe the fix needs to be integrated into. If more of the code is needed, please reply and ask as its fairly lengthy and dynamic.
doAnimation: function(n,data)
{
var self = this; //self in this scope refers to PikaChoose object. Needed for callbacks on animations
var aWidth = self.aniDiv.children('div').eq(0).width();
var aHeight = self.aniDiv.children('div').eq(0).height();
self.aniDiv.children().each(function()
{
//position myself absolutely
var div = $(this);
var xOffset = Math.floor(div.parent().width()/5)*div.attr('col');
var yOffset = Math.floor(div.parent().height()/5)*div.attr('row');
div.css({
'background':'url('+data.source+') -'+xOffset+'px -'+yOffset+'px',
'width':'0px',
'height':'0px',
'position':'absolute',
'top':yOffset+'px',
'left':xOffset+'px',
'float':'none'
});
});//end ani_divs.children.each
switch(n)
{
case 0:
//full frame fade
self.aniDiv.height(self.image.height()).hide().css({'background':'url('+data.source+') top left no-repeat'});
self.aniDiv.children('div').hide();
self.aniDiv.fadeIn('slow',function(){
self.finishAnimating(data);
self.aniDiv.css({'background':'transparent'});
});
break;
case 1:
self.aniDiv.children().hide().each(function(index)
{
//animate out as blocks
var delay = index*30;
$(this).css({opacity: 0.1}).delay(delay).animate({opacity: 1,"width":aWidth,"height":aHeight},200,'linear',function()
{
if($(".animation div").index(this) == 24)
{
self.finishAnimating(data);
}
});
});
break;
case 2:
self.aniDiv.children().hide().each(function(index)
{
var delay = $(this).attr('row')*30;
$(this).css({opacity:0.1,"width":aWidth}).delay(delay).animate({opacity:1,"height":aHeight},500,'linear',function()
{
if($(".animation div").index(this) == 24)
{
self.finishAnimating(data);
}
});
});
break;
case 3:
self.aniDiv.children().hide().each(function(index)
{
var delay = $(this).attr('col')*10;
aHeight = self.gapper($(this), aHeight);
$(this).css({opacity:0.1,"height":aHeight}).delay(delay).animate({opacity:1,"width":aWidth},800,'linear',function()
{
if($(".animation div").index(this) == 24)
{
self.finishAnimating(data);
}
});
});
break;
case 4:
self.aniDiv.children().show().each(function(index)
{
var delay = index*Math.floor(Math.random()*5)*10;
aHeight = self.gapper($(this), aHeight);
if($(".animation div").index(this) == 24)
{
delay = 800;
}
$(this).css({"height":aHeight,"width":aWidth,"opacity":.01}).delay(delay).animate({"opacity":1},800,function()
{
if($(".animation div").index(this) == 24)
{
self.finishAnimating(data);
}
});
});
break;
case 5:
//full frame slide
self.aniDiv.height(self.image.height()).hide().css({'background':'url('+data.source+') top left no-repeat'});
self.aniDiv.children('div').hide();
self.aniDiv.css({width:0}).animate({width:self.image.width()},'slow',function(){
self.finishAnimating(data);
self.aniDiv.css({'background':'transparent'});
});
break;
case 6:
//fade out then in
self.aniDiv.hide();
self.image.fadeOut('slow',function(){
self.image.attr('src',data.source).fadeIn('slow',function()
{
self.finishAnimating(data);
});
});
break;
}
},//end doAnimation
finishAnimating: function(data)
{
this.animating = false;
this.image.attr('src',data.source);
this.aniDiv.hide();
this.anchor.attr('href',data.clickThrough);
if(this.options.showCaption)
{
this.caption.html(data.caption).fadeIn('slow');
}
if(this.options.autoPlay == true)
{
var self = this;
this.image.delay(this.options.speed).fadeIn(0,function(){ if(self.options.autoPlay){ self.nextClick(); } });
}
},//end finishedAnimating
gapper: function(ele, aHeight)
{
if(ele.attr('row') == 9 && ele.attr('col') == 0)
{
//last row, check the gap and fix it!
var gap = ani_divs.height()-(aHeight*9);
return gap;
}
return aHeight;
},
nextClick : function(e)
{
var how = "natural";
try{
var self = e.data.self;
}catch(err)
{
var self = this;
how = "auto";
}
var next = self.active.parents('li:first').next().find('img');
if(next.length == 0){next = self.list.find('img').eq(0);};
next.trigger('click',{how:how});
},
prevClick : function(e)
{
var self = e.data.self;
var prev = self.active.parents('li:first').prev().find('img');
if(prev.length == 0){prev = self.list.find('img:last');};
prev.trigger('click');
},
playClick: function(e)
{
var self = e.data.self;
self.options.autoPlay = !self.options.autoPlay;
self.imgPlay.toggleClass('play').toggleClass('pause');
if(self.options.autoPlay){ self.nextClick(); }
}
}); //end extend
})(jQuery);
The "cases" are types of transitions that are called by the overall function whether they be a block animation, slide animation, etc. The case that I am using is case 6, which fades the main gallery image out, then fades the new gallery image in after the first image is completed faded out. I am having trouble integrated the progid IE filter fix inside of this code as I am an amateur with jQuery, but have a fairly solid c and c# background. I'm simply stuck and the program breaks wherever I try to insert it. If anyone could please help, it would be much appreciated.