1

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);
user2524908
  • 861
  • 4
  • 18
  • 46

1 Answers1

2

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
        });
});
Billy Moon
  • 57,113
  • 24
  • 136
  • 237
  • 1
    Thats what I initially tried, but it just zooms in right away without the transition, which means its not picking up the options. – user2524908 Mar 07 '16 at 04:44