Simulating a Pan Image jQuery plugin

Fact: jQuery has plugins for everything.

Fact: you don’t have to use plugins for everything.

Working on a custom javaScript intensive CMS I get the task of displaying a big image inside a controlled environment. I could have used a plugin like MbImgNavigator or ImageZoom. I implemented both but I wasn’t particularly satisfied with neither.

So I created my own simulation that is just a couple of lines without even the need for something complex.
What it does:

• checking if the image is bigger than then the restrictive container
• modifies a envelope container to allow movement only between the calculated permitted limits
• activates the drag (jQueryUI) by globally or by axis if only one of the dimensions is overlapping the limits

If the image is smaller that the limits nothing happens.

$(document).ready( function (){
var overflow_x = 0;
var overflow_y = 0;
var _image_x = $('#imageTest').width();
var _image_y = $('#imageTest').height();
if( _image_x > 300 ){
overflow_x = _image_x;
}
if( _image_y > 300 ){
overflow_y = _image_y;
}
if( overflow_x && overflow_y ){
$('#bckContainerImg').css(
{
height: (overflow_y * 2 - 300),
width: ( overflow_x * 2 - 300 ),
'margin-top' : -( overflow_y - 300),
'margin-left': -( overflow_x - 300)
}
);
$("#bigImg img").draggable({containment: '#bckContainerImg'}).css({ cursor: 'all-scroll'});
} else{
if( overflow_x ){
$('#bckContainerImg').css({width: ( overflow_x*2 -300 ), 'margin-left': -(overflow_x - 300) });
$("#bigImg img").draggable({ axis: 'x', containment: '#bckContainerImg' }).css({ cursor: 'e-resize'});
}
if( overflow_y ){
$('#bckContainerImg').css({ height: (overflow_y * 2 - 300), 'margin-top': -(overflow_y - 300),});
$("#bigImg img").draggable({ axis: 'y', containment: '#bckContainerImg' }).css({ cursor: 'n-resize'});
}
}
});


You can see a full demo here.