CODEWITHSUNDEEP
jquery
faizul haque
faizul haque

Reputation:

jquery zoom and pan

i am using jquery-1.2.6.js and jquery.panFullSize.js two js file to Zoom and Pan image.

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, if i click on the image(mousedown <200 microsecond ) it will zoom in / out (toggle) as zoom hyperlink working. and if i drag(mousedown >200 microsecond ) the image then it will pan as pan working.

Upvotes: 2

Views: 1999

Answers (1)

PetersenDidIt
PetersenDidIt

Reputation: 25620

Looks like the plugin panFullSize creates a div that has the id of the image with pan prepended on 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();  
    });

Upvotes: 2

Related Questions