How to resize an image on click with jQuery?

Question

I've the next problem: I've got a div which contains an image.

I need this image resized if is bigger than the width of the div, and if the user click the image, show it at the full size.

The div width is managed with the windows width.

How do I do that?

Answer 1

jQuery.popeye is a slick plugin for doing interactions like this.

Answer 2

Jquery imagefit can be used + a modal popup box of choice

Answer 3

You can use the .css() function to set the size of the image, or if you want to make it a bit spiffier, you can use .animate() to animate the change.

Say your image's id is #myimage, this is how you would do it.

$("#myimage").click(function(){
   var imgWidth=    $(this).css("width");
   var imgHeight =  $(this).css("height");
   //Checks if the image is already in original size:
   if(imgWidth == originalWidth && imgHeight == originalHeight)
   {
       resizeImage();
   }
   else
   {
       $(this).css({width:originalWidth, height: originalHeight});
   }

});

This assumes you already saved away the original size of the image, since otherwise, there's no way to calculate how big the picture used to be.

EDIT:

Assume your div's id is #mydiv

the $(document).ready() is called when the page finishes loading.

function resizeImage()
{
        var imgWidth=    $("#myimage").css("width");
        var imgHeight =  $("#myimage").css("height");
        var divWidth = $("#mydiv").css("width") ;
        var divHeight = $("#mydiv").css("height") ;
        originalHeight = imgHeight;
        originalWidth=imgWidth;

        if (imgWidth > divWidth && imgHeight > divHeight)
        {
            var heightDiff = imgHeight  - divHeight;
            var widthDiff = imgWidth  - divWidth;
            //First find out which of the two dimensions is MORE boundry stretching, then we only change that dimension, to keep the image's original proportions.
            if(heightDiff>widthDiff)
            {
                $("#myimage").css("height", divHeight); //Set the
            }
            else
            {
                $("#myimage").css("width", divWidth); //Set the width to the div's width
            }
        }
        else if(imgWidth > divWidth)
        {
            $("#myimage").css("width", divWidth); //Set the width to the div's width
        }
        else if (imgHeight > divHeight)
        {
            $("#myimage").css("height", divHeight); //Set the height to the div's height
        }
}

$(document).ready(function(){
    resizeImage();
});