Skip to content

Instantly share code, notes, and snippets.

@johnantoni
Created April 14, 2011 08:20
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnantoni/919122 to your computer and use it in GitHub Desktop.
Save johnantoni/919122 to your computer and use it in GitHub Desktop.
Supersleight jQuery Plugin for Transparent PNGs in IE6
jQuery.fn.supersleight = function(settings) {
settings = jQuery.extend({
imgs: true,
backgrounds: true,
shim: 'x.gif',
apply_positioning: true
}, settings);
return this.each(function(){
if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4) {
jQuery(this).find('*').andSelf().each(function(i,obj) {
var self = jQuery(obj);
// background pngs
if (settings.backgrounds && self.css('background-image').match(/\.png/i) !== null) {
var bg = self.css('background-image');
var src = bg.substring(5,bg.length-2);
var mode = (self.css('background-repeat') == 'no-repeat' ? 'crop' : 'scale');
var styles = {
'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')",
'background-image': 'url('+settings.shim+')'
};
self.css(styles);
};
// image elements
if (settings.imgs && self.is('img[src$=png]')){
var styles = {
'width': self.width() + 'px',
'height': self.height() + 'px',
'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + self.attr('src') + "', sizingMethod='scale')"
};
self.css(styles).attr('src', settings.shim);
};
// apply position to 'active' elements
if (settings.apply_positioning && self.is('a, input') && (self.css('position') === '' || self.css('position') == 'static')){
self.css('position', 'relative');
};
});
};
});
};
@alucardek
Copy link

Hi, I found one problem: when I put inline it it creates both image with a transparent background and alt (or img name if there is no alt) text as the image doesn't exist. Why there is something like that? Here is the picture: http://snag.gy/7Eikr.jpg (at the bottom there is a semi transparent background and it works correctly; the picture is from IE7, but the same in IE6, 8...)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment