How to set Jquery panzoom default zoom?

Question

I want to set its defualt zoom what ever i need

Please tell me how to change this default zoom value i am not able to find with this plugin API ? Please Help ? Thanks

This is my HTML

<section id="focal1">
<div id="dd2">

<div class="buttons1">
        <button id="zoominbtn1" class="zoom-in-1">+</button>
        <button id="zoomoutbtn1" class="zoom-out-1">-</button>
        <input type="range" class="zoom-range-1" style="position: absolute; margin-top: 2px; background-color: cornsilk;">
        <button id="restbtn1" class="reset-1" style="margin-left: 254px;">Default Zoom</button>
      </div> 
      <div class="parent1" >
        <div class="panzoom1">
<div id="belowpart">    

<img src="" usemap='#searchplot' class='searchplot_css' title='searchplot' alt='searchplot' id='img-searchplot' />
<map id='searchplot' name='searchplot'>

</map>

</div>
</div>
</div>
</div>
    </section>

and this is panzoom function JS:

(function() {
        var $section = $('#focal1').first();
        $section.find('.panzoom1').panzoom({
          $zoomIn: $section.find(".zoom-in-1"),
          $zoomOut: $section.find(".zoom-out-1"),
          $zoomRange: $section.find(".zoom-range-1"),
          $reset: $section.find(".reset-1")

        });
      })();

where i call zoom() right after initialization or Or set a value for startTransform in the options ? i want default value zero and also when load image should also zoom out how to do this ?

Andreas · Accepted Answer · 2016-05-19T07:23:35.717

1

Either call zoom() right after initialization

$elem.panzoom("zoom", 1.1, {silent: true})  // +10%

Or set a value for startTransform in the options

$elem.panzoom({
    //...
    startTransform: "scale(1.1)"  // +10%
})

(from this issue: https://github.com/timmywil/jquery.panzoom/issues/218)

Edit:

(function() {
    var $section = $('#focal1').first();

    var elements = $section.find('.panzoom1');

    // initialize
    elements.panzoom({
        startTransform: 1.0,  // = no zoom
        $zoomIn: $section.find(".zoom-in-1"),
        $zoomOut: $section.find(".zoom-out-1"),
        $zoomRange: $section.find(".zoom-range-1"),
        $reset: $section.find(".reset-1")
    });

    // set new zoom value with animation
    elements.panzoom("zoom", 2.0, { animate: true });  // = 200%
})();

edited May 19 '16 at 07:23

answered May 19 '16 at 06:40

Andreas

21,535
7
47
56

thanks for answer, please take a look again my question and tell me where to aplly these options that you tell me.. – user4441 May 19 '16 at 06:46
As shown in the documentation and the link I've posted (last entry)... Just add the `startTransform` option in the object (along with all the `$...` options) you're passing to `.panzoom()` – Andreas May 19 '16 at 06:51
this solution set default zoom value, but i want that my image also zoom out – user4441 May 19 '16 at 07:04
please see again in question what i want – user4441 May 19 '16 at 07:06
Read the documentation what effects the values have I've passed in my examples – Andreas May 19 '16 at 07:08
actually i am not getting from documentation, please change my JS Function, i'll be highly grateful, because i am wasting my time on this since yesterday – user4441 May 19 '16 at 07:09
I've added the steps for initialization and a custom zoom level (with animation) afterwards – Andreas May 19 '16 at 07:24

score 1 · Answer 2 · answered May 26 '16 at 10:51

Change your function like this

(function() {
        var $section = $('#focal1').first();
        $section.find('.panzoom1').panzoom({
          $zoomIn: $section.find(".zoom-in-1"),
          $zoomOut: $section.find(".zoom-out-1"),
          $zoomRange: $section.find(".zoom-range-1"),
          $reset: $section.find(".reset-1"),
          startTransform: "scale(1.1)"

        });
      })();

How to set Jquery panzoom default zoom?

2 Answers2