Panning scale with bxSlider does not scale in centralized
I have used jquery Panzoom with bxSlider. The problem is that when scrolling with scrolling, it doesn't scale in the center. The scale goes either to the left or to the right. Because of the slider, otherwise it works correctly.
find a demo of the script .
<div class="slider">
<ul class="bxSlider">
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="https://rockwoodtables.files.wordpress.com/2012/06/table-4.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="http://www.patiocollection.com/images/D/971250B.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
<li>
<section class="focal">
<div class="parent">
<div class="panzoom">
<img src="http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/1375/images/ce0941_ext.jpg" width="1000" height="450" />
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range" />
<button class="reset">Reset</button>
</div>
</section>
</li>
</ul>
</div>
js
(function() {
var $section = $('.focal');
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"),
$set: $section.find('.parent > div')
});
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
animate: false,
focal: e
});
});
})();
$('.bxSlider').bxSlider({
auto:true,
autoHover: true,
speed:1800,
controls: true,
pager: false,
pause: 10000
});
source to share
Your problem is not the slider itself. You just select multiple items (sections) with the same class .focal
.
Panzoom is designed to be used on a single element. So we just need to create a function and iterate over each element with each()
. Now we can call the function every time we bind a method panzoom()
to each element (separately).
JSFiddle (edited JS only)
source to share