3

Im trying to work out how to make an image that is way bigger than the browser window (2000x2800px) scale when initializing jquery.panzoom. I need the image to resize itself so it will fit within the height of the container.

Check out this jsFiddle: http://jsbin.com/raxejirubayu/1/edit?html,css,js,output

Anyone with any experience using panzoom able to help me out? Virtual beers and highfives given in return.

askenielsen
  • 85
  • 3
  • 9

1 Answers1

2

I've fixed this issue by writing this javascript code, it basically calculates the zoom and pan parameters according to the image size and container size and applies transformations such that the image is stretched to the container boundary.

Javascript file

$(document).ready(function(){
    $panzoom = $(".cimage").panzoom();

    //Wait for the image to load
    $('.cimage').load(function(){
        //Get container and image
        var image = $('.cimage');
        var container = $('.image-container');

        //Get container dimensions
        var container_height = container.height();
        var container_width = container.width();

        //Get image dimensions
        var image_height = image.height();
        var image_width = image.width();

        //Calculate the center of image since origin is at x:50% y:50%
        var image_center_left = image_width / 2.0;
        var image_center_top = image_height / 2.0;

        //Calculate scaling factor
        var zoom_factor;

        //Check to determine whether to stretch along width or heigh
        if(image_height > image_width)
            zoom_factor = container_height / image_height;
        else
            zoom_factor = container_width / image_width;

        //Zoom by zoom_factor
        $panzoom.panzoom("zoom", zoom_factor, {animate: false});

        //Calculate new image dimensions after zoom
        image_width = image_width * zoom_factor;
        image_height = image_height * zoom_factor;

        //Calculate offset of the image after zoom
        var image_offset_left = image_center_left - (image_width / 2.0);
        var image_offset_top = image_center_top - (image_height / 2.0);

        //Calculate desired offset for image
        var new_offset_left = (container_width - image_width) / 2.0;
        var new_offset_top = (container_height - image_height) / 2.0;

        //Pan to set desired offset for image
        var pan_left = new_offset_left - image_offset_left;
        var pan_top = new_offset_top - image_offset_top;
        $panzoom.panzoom("pan", pan_left, pan_top);

    });
});

HTML file

<div class="image-container">
    <img class='cimage' src="abc.jpg'/>
</div>

It is stretched along width or height, depending upon image orientation (portrait or landscape) but if you want to stretch only along height then you need to replace

if(image_height > image_width)
    zoom_factor = container_height / image_height;
else
    zoom_factor = container_width / image_width;

with

zoom_factor = container_height / image_height;

but I would recommend against it because it would not be able to handle landscape images.

Usman Shahid
  • 86
  • 7
  • this does provide mixed results with relatively large images, along with mobile devices. Seems that the pan calculations need a little tweaking – Starboy May 06 '15 at 01:09
  • I think it would work since I'm not using original image width and height in pan calculations, they are recalculated after the image is zoomed out/in. – Usman Shahid May 07 '15 at 08:37
  • I've found that while the zooming works fine, the subsequent panning seems to have no effect, and the image is positioned on the right of the viewport, rather than in the middle. I can't see how to fix this. http://stackoverflow.com/questions/32583854/jquery-panzoom-plugin-positioning-image-on-right-with-containinvert?lq=1 – Phil Gyford Sep 18 '15 at 12:57