Jquery panzoom duration

Question

Has anyone been able to get the duration on the panzoom to function? https://github.com/timmywil/jquery.panzoom

I went into the source code and increased the duration time from 200 to 1200 and did not see a change when I called the zoom.

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

updated

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


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

 $panzoom.panzoom("zoom", true);
});

Anders Elmgren · Accepted Answer · 2016-03-07T00:26:00.873

Why not just change it with the option() method? From the panzoom docs:

// One at a time
// Sets the scale increment option
$elem.panzoom("option", "duration", 1200);

// Several options at once
$elem.panzoom("option", {
  increment: 0.4,
  minScale: 0.1,
  maxScale: 2,
  duration: 500,
  $reset: $("a.reset-panzoom, button.reset-panzoom")
});

You shouldn't have to change any defaults in the source to set a different duration.

EDIT:

You need to give "zoom" a boolean attribute of true to set your own duration in options, as mentioned in the docs:

"If the method is passed a boolean, true will indicate to perform a zoom-out based on the increment specified in options. If false (or omitted), a zoom-in will be performed."

Below is a working version where i've set a custom duration in options (2500) and used the panzoom("zoom", true):

<html>
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://timmywil.github.io/jquery.panzoom/dist/jquery.panzoom.js"></script>
  </head>
  <body>
    <section id="contain">
      <h1>Containment within the parent element</h1>
      <div class="panzoom-parent" style="overflow: hidden; position: relative;">
        <img class="panzoom" src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900" style="transform: matrix(0.9, 0, 0, 0.9, -46, 44); backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transition: transform 200ms ease-in-out;">
      </div>
      
      <div class="buttons">
        <button class="zoom-in">Zoom In</button>
        <button class="zoom-out">Zoom Out</button>
        <input type="range" class="zoom-range" step="0.05" min="0.4" max="0.9">
        <button class="reset">Reset</button>
      </div>
      <script>
        (function() {
          var $section = $('#contain');
          var $panzoom = $section.find('.panzoom').panzoom({
            $zoomIn: $section.find(".zoom-in"),
            $zoomOut: $section.find(".zoom-out"),
            $zoomRange: $section.find(".zoom-range"),
            $reset: $section.find(".reset"),
            startTransform: 'scale(0.9)',
            maxScale: 0.9,
            increment: 0.1,
            contain: true,
            duration:2500
          }).panzoom('zoom', true);
        })();
      </script>
    </section>
  </body>
</html>

It doesnt work. When I set the duration like that it doesnt change the zoom time. — user2524908, Mar 06 '16 at 23:52
I've updated the answer, you need to use the boolean true as the parameter to "zoom" to use the duration set in options(). — Anders Elmgren, Mar 07 '16 at 00:34
Thanks for clearing that up. Can you pass that true value, when you call zoom on an element? $panzoom.panzoom("zoom", 2.5, true); — user2524908, Mar 07 '16 at 01:13
Yes, you'd only want the ("zoom", true) to be able to use the related options for the scale and transition. Using an integer sets it to that scale number automatically with no transition. In the docs: "If the method is passed a number, zoom() will immediately set that scale without transitioning. This is mostly useful for the range input and pinch gestures." So if you wanted to use some manual controls on the scale factor, you could use a variable for the scale integer param, otherwise just go with true and set options accordingly. — Anders Elmgren, Mar 07 '16 at 01:35
Sorry, I am a bit confused. So if I provide the duration when the zoom is initialized. How can I call later on a click handler to zoom in with duration? — user2524908, Mar 07 '16 at 03:13

Jquery panzoom duration

1 Answers1