Jquery panzoom duration

Est-ce que quelqu'un a pu faire fonctionner la durée sur le panzoom? Je suis entré dans le code source et a augmenté la durée de 200 à 1200 et n'a pas vu de changement lorsque j'ai appelé le zoom.Jquery panzoom duration

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

mis à jour

  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); 
});

Source

2016-03-06 user2524908

Pourquoi ne pas changer juste la méthode d'option()? De l'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") 
});

Vous ne devriez pas avoir à modifier les paramètres par défaut dans la source pour définir une durée différente.

EDIT:

Vous devez donner « zoom » un attribut booléenne true pour définir votre propre durée dans les options, comme mentionné dans la documentation:

« Si la méthode est passé un booléen, vrai indiquera d'effectuer un zoom arrière basé sur l'incrément spécifié dans les options.Si faux (ou omis), un zoom avant sera effectué. "

Ci-dessous est une version de travail où j'ai mis une durée personnalisée dans les options (2500) et a utilisé le 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>

Source

2016-03-06 23:49:10

cela ne fonctionne pas. Quand je règle la durée comme ça, ça ne change pas le temps de zoom. – user2524908

J'ai mis à jour la réponse, vous devez utiliser le booléen true comme paramètre pour "zoomer" afin d'utiliser la durée définie dans options(). –

Merci d'avoir éclairci ça. Pouvez-vous passer cette vraie valeur, lorsque vous appelez zoom sur un élément? $ panzoom.panzoom ("zoom", 2.5, vrai); – user2524908

Jquery panzoom duration

Répondre

Questions connexes