如何设置Jquery panzoom 默认缩放?
How to set Jquery panzoom default zoom?
我想根据需要设置它的默认缩放
请告诉我如何更改我无法使用此插件找到的默认缩放值 API?请帮忙 ?谢谢
这是我的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>
这是全景缩放功能
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")
});
})();
我在初始化后立即调用 zoom() 或者在选项中为 startTransform 设置一个值?
我想要默认值为零,而且当加载图像时也应该缩小如何做到这一点?
初始化后立即调用zoom()
$elem.panzoom("zoom", 1.1, {silent: true}) // +10%
或在选项
中为startTransform
设置一个值
$elem.panzoom({
//...
startTransform: "scale(1.1)" // +10%
})
(来自本期:https://github.com/timmywil/jquery.panzoom/issues/218)
编辑:
(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%
})();
像这样改变你的功能
(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)"
});
})();
我想根据需要设置它的默认缩放
请告诉我如何更改我无法使用此插件找到的默认缩放值 API?请帮忙 ?谢谢
这是我的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>
这是全景缩放功能 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")
});
})();
初始化后立即调用zoom()
$elem.panzoom("zoom", 1.1, {silent: true}) // +10%
或在选项
中为startTransform
设置一个值
$elem.panzoom({
//...
startTransform: "scale(1.1)" // +10%
})
(来自本期:https://github.com/timmywil/jquery.panzoom/issues/218)
编辑:
(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%
})();
像这样改变你的功能
(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)"
});
})();