pngfix WordPress Plugin

This plugin uses CSS technique to fix the png image transparency issue and jQuery to apply this script to all of png images shown in the page. The CSS code added by the script is :

.png {
background-image: expression(
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + (this.tagName==\'IMG\' ? this[\'src\'] : this.currentStyle[\'backgroundImage\'].split(\'\"\')[1]) + ")",
this.runtimeStyle.backgroundImage = "none",
this.src = "{plugindir}/pixel.gif",
this.width = this.style.width | this.clientWidth,
this.height = this.style.height | this.clientHeight
);
}';

And the jQuery code which applies this css to all of the png images :

$(document).ready(function(){
if(($.browser.msie)&(parseInt($.browser.version)<7)){
$("img[src$='.png']").each(function(){$(this).addClass("png");});
}
});

That’s all. The jQuery library is included in the plugin so you don’t need to modify anything.

Installation is simple. Just follow these steps :

1. Upload ‘wp-pngfix’ directory to the ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Thats all. Go to any page which contains some png images with IE and check if there’s any errors.

This should fix them all except backgrounds now.

Download: Official WordPress plugin page : http://wordpress.org/extend/plugins/wp-pngfix/

Note: This type of fixes cause slight color changes to your png images with background color, so you may have to change some css.If you use images without inner backgrounds and only need to show the background transparent, forget that note 🙂