OllyHodgson · July 27, 2011 12:42 · OllyHodgson · Jun 23, 2015
diff --git a/jquery.imgresizer.js b/jquery.imgresizer.js
 /*
    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();
        });
    }
    	
 });
	/*
	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();
	});
	}

	});