views:

60

answers:

0

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.