[beta, MIT license] Adds IE5/6/7/8 support for transparent PNGs and fixes issue where black blobs appear on non-binary alpha channel areas of PNGs when using CSS opacity or fading with jquery.cycle
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
TODO
bg1.jpg
bg2.jpg
circles.png
demo.html
jquery.cycle.all.min.js
jquery.iepngfix.js
jquery.iepngfix.min.js
tests.html
tests.js
triangles.png

README.md

IE5/6/7/8 transparent PNG fix

Adds IE5/6/7/8 support for transparent PNGs and fixes issue where black blobs appear on non-binary alpha channel areas of PNGs when using CSS opacity or fading with jquery.cycle.

This code amalgamates various solutions to this problem that I found elsewhere on the Internet with a few additions, cleaned up and packaged as a friendly jQuery plugin.

Unlike other plugins there's no need to specify a 1x1 shim file, as a Base64 version is embedded directly in the plugin source.

Usage

Make sure that you've included jQuery:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js></script>

In your jQuery script, use a selector to pick out the elements that you want to apply the PNG fix to.

IMG elements using a PNG:

$('#slideshow img').fixPNG();

other elements with a CSS 'background-image' PNG:

$('.bg-container').fixPNG();

And you're done! jquery.iepngfix will automatically determine which case applies to each selected element and fix it as appropriate. Elements that don't apply will be ignored.

For performance reasons you should only apply this fix where needed, but you can also specify all images or even all elements on a page:

$('body *').fixPNG();
$('img').fixPNG();

Here's how you'd go about cycling transparent PNGs with jquery.cycle in conjunction with this plugin:

	$('ul li img').fixPNG({divWrapImages: true});
	$('ul li').cycle({cleartypeNoBg: true});

Check out demo.html example #3 to see this in action.

Notes

Only apply this fix to PNGs with transparent backgrounds. This fix uses the IE "AlphaImageLoader" filter which slows down the browser, so use it sparingly and only as needed.

Use jquery.iepngfix.min.js for production. Minified using Douglas Crawford's JSMin utility.

Demo

Check out demo.html in the "demo" folder.

Issues

Please add any issues you might find to the Github issue tracker. Or feel free to fork and send a pull request.

License

This project is licensed under the MIT license.

Author

Created by Jonathan from Solid Design Group, a Lehigh Valley website design company.

Sources

Other solutions: