Skip to content

Instantly share code, notes, and snippets.

@OllyHodgson
Created July 27, 2011 12:42
Show Gist options
  • Save OllyHodgson/1109280 to your computer and use it in GitHub Desktop.
Save OllyHodgson/1109280 to your computer and use it in GitHub Desktop.
Image scaling in IE6 and 7 is bobbins. This script uses Microsoft's proprietary filter gubbins to make it better.
/*
IMGRESIZER
Image scaling in IE6 and 7 is bobbins. This uses their proprietary filter gubbins to make it better.
Original by Ethan Marcotte, at http://unstoppablerobotninja.com/entry/fluid-images/
Rejigged by Olly Hodgson.
So Ethan [@beep] wrote a script that'll make IE6 and 7 on Windows resize
images beautifully [http://unstoppablerobotninja.com/entry/fluid-images/]
(without the performance hit you take from using -ms-interpolation-mode:
bicubic;). Tom H pointed out in the comments that it broke the right-click
and save functionality. This was acceptable to Ethan, but it bugged me.
So I set about tearing Ethan's original apart. I'm a jQuery monkey so I
used that, instead of the straight JS he used.
It:
# Clones the original image
# Positions the clone over the top of the original, then sets it's opacity
to 0. That way, you can right-click and save it (etc) but see though it
# Then it does the fancy rescaler stuff to the original image
# On resize it re-does the fancy stuff
Olly Hodgson, May 2009.
Originally posted to:
http://thinkdrastic.net/journal/wp-content/uploads/2009/05/imgresizer.htm
*/
function imgResizer () {
$(".IE6 img:not(.clone), .IE7 img:not(.clone)").each(function (i) {
var currentImg, currentClone, currentCloneId, currentWidth, currentHeight;
currentImg = $(this);
/* Wrap a span around the original image to help with positioning */
if (!$(currentImg).parent().hasClass("imgWrapper")) {
$(currentImg).wrap("<span class='imgWrapper'></span>");
}
$(currentImg).attr("id", "original" + i);
/* Figure out if this image has a clone, and if not, clone it. */
currentCloneId = "#clone" + $(currentImg).attr("id").substring(8);
if ($(currentCloneId).length === 0) {
$(currentImg).clone().insertAfter(currentImg).addClass("clone").css({"position" : "absolute", "top" : "0", "left" : "0", "opacity" : "0" }).attr("id", "clone" + i);
/* Remove these so screenr reader users don't get them twice */
$(currentImg).attr("alt", "");
$(currentImg).attr("title", "");
}
currentClone = $(currentCloneId);
/* Set the original img src to that of the clone */
if ($(currentImg).attr("src") != $(currentClone).attr("src")) {
$(currentImg).attr("src", $(currentClone).attr("src"));
}
/* Resize it accordingly */
$(currentImg).width("100%");
$(currentImg).height("auto");
currentWidth = currentImg[0].clientWidth;
currentHeight = currentImg[0].clientHeight;
/* Now apply the filter and put the transparent gif back */
currentImg[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + currentImg[0].src + "', sizingMethod='scale')";
currentImg[0].src = "x.gif";
/* Now set the height on both the original and it's clone */
$(currentImg).width(currentWidth);
$(currentImg).height(currentHeight);
$(currentClone).width(currentWidth);
$(currentClone).height(currentHeight);
});
}
/*
ONLOAD FUNCTION
These functions are fired as soon as the DOM is ready
*/
$(document).ready(function () {
/* Check we're in IE6 or 6 - see the conditional comments in the <body> */
if ($(".IE6, .IE7").length > 0) {
imgResizer();
$(window).resize(function(){
imgResizer();
});
}
});
@OllyHodgson
Copy link
Author

Funny to think what a pressing problem this was 6 years ago, and how the script seems utterly irrelevant today 😄

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