A project I worked on recently called for a carousel with five images of different sizes — somewhat like a “light” coverflow. I ended up building it with basic <img> tags that get scaled by javascript which modified the width attribute.
Cover Slider Layout
One of the problems that I ran in to involved the loss of quality from Internet Explorer 6 and 7 when the browser renders the image at a smaller dimension than the file.
An image scaled in internet explorer.
This project was for a site that still has a substantial amount of visitors using IE6 (and IE7’s scaling abilities are not much better than 6). So I needed to come up with a way to correct the image scaling. A short google later, I found Ethan Marcotte’s blog post Fluid Images [via Unstoppable Robot Ninja] and a post on flickr’s developer blog.
It turns out that the Microsoft AlphaImageLoader used to support transparent pngs in IE6 will also cause the browser to use a better engine to render scale.
Here is how I fixed scaled images for IE6:
// apply AlphaImageLoader in IE6 for better image scaling
var broswerVersion=navigator.appVersion;
if(broswerVersion.indexOf('MSIE 6') >= 0) {
$('.cover_slider .images img').each(function() {
var imgSrc = $(this).attr('src');
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" imgSrc "', sizingMethod='scale')";
this.src = '/images/misc/spacer.gif';
});
}
You use the src from the image in the AlphaImageLoader call, and then replace the src with a transparent “spacer” gif. It’s not perfect, but it is definitely much better.
IE7 is even easier. It can be fixed with a simple MS specific CSS class.
.cover_slider img { -ms-interpolation-mode:bicubic;}