CODEWITHSUNDEEP
javascriptjquerysvgjquery.panzoom
user2524908
user2524908

Reputation: 871

Jquery panzoom on click

Looking to implement a jquery plugin which allows you to zoom into svg elements. https://github.com/timmywil/jquery.panzoom

What I am having issues with is implementing the zoom functionality when a user clicks on an element, while using the 'duration' parameter available in the framework.

An example

var $section = $('section').first();
            $panzoom = $section.find('.panzoom').panzoom({
                contain: false,
                minScale: 1,
                maxScale: 3,
                contain: true,
                duration: 1200
            }).panzoom('zoom', true);

Some HTML

<element class='test'/>

Some click handler

$('.test').on('click' function(){

    $panzoom.panzoom("zoom", 2.5);

});

This will zoom in, however it will not use the 'duration' provided.

It looks like just calling zoom will zoom in, and calling zoom with the true parameter will zoom out. However it doesnt seem to be zooming to my maxScale.

//in
  $panzoom.panzoom("zoom");
//out
  $panzoom.panzoom("zoom", true);

Upvotes: 1

Views: 2275

Answers (1)

Billy Moon
Billy Moon

Reputation: 58581

Just a guess, but from API, I would expect to call more like this...

... first setup selectors...

var $section = $('section').first(),
    $panzoom = $section.find('.panzoom');

... later on ...

$('.test').on('click' function(){
    $panzoom.panzoom("zoom", 2.5, {
            contain: false,
            minScale: 1,
            maxScale: 3,
            contain: true,
            duration: 1200
        });
});

Upvotes: 2

Related Questions