Resizing for jquery.panzoom height
I am trying to figure out how to make an image that is larger than the browser window scale (2000x2800px) when jquery.panzoom is initialized. I need an image to be resized to fit the height of the container.
Check out this jsFiddle: http://jsbin.com/raxejirubayu/1/edit?html,css,js,output
Anyone with experience using panzoom can help me? Virtual beer and highfives are given in return.
source to share
I 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 so that the image is stretched to the border of the container.
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 stretches along the width or height, depending on the orientation of the image (portrait or landscape), but if you only want to stretch in height, you need to replace
if(image_height > image_width)
zoom_factor = container_height / image_height;
else
zoom_factor = container_width / image_width;
from
zoom_factor = container_height / image_height;
but I would recommend against it because it won't be able to handle landscape images.
source to share