Jquery zoom and pan
I am using jquery-1.2.6.js and jquery.panFullSize.js two js files for zoom and pan.
here is my html,
<a href="#" id="zoom">Zoom< /a>
<img src="testimage.jpg" alt="finnish winter" width="600" border="0"
usemap="#mypicMap" id="mypic" style="border: medium solid black" />
Here is my javascript,
$("img#mypic").panFullSize(700, 450).css("border", "medium solid black");
$("a#zoom").toggle(function(){
$("img#mypic").normalView();
},
function(){
$("img#mypic").panFullSize();
}
);
what i am trying is if i click on the image (mousedown <200 micececond) it will zoom in / out (toggle) as the zoom hyperlink works. and if I drag (mousedown> 200 microseconds) the image, then it will pan like a pan works.
+2
faizul haque
source
to share
1 answer
It looks like the panFullSize plugin creates a div that has an image id with panning added to it. So, you can do something like this:
$('#panmypic').mousedown(function(){
$(this).bind('mouseup',function(){
$("img#mypic").normalView();
})
.bind('mousemove',function(e){
$(this).unbind('mouseup');
});
});
$("img#mypic").click(function(){
$("img#mypic").panFullSize();
});
+2
source to share