使用 bxSlider 平移缩放不集中放大答案

【问题标题】：Pan zoom with bxSlider not zooming in centralized使用 bxSlider 平移缩放不集中放大
【发布时间】：2015-07-17 00:36:45
【问题描述】：

我使用了带有 bxSlider 的 Panzoom jquery。问题是在使用滚动缩放时它不会在中心缩放。缩放向左或向右由于滑块，否则它可以正常工作。

在这里找到fiddle demo。

<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>

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

【问题讨论】：

标签： jquery css bxslider jquery.panzoom

【解决方案1】：

您的问题不是滑块本身。您只是选择了具有相同类.focal 的多个元素（部分）。

Panzoom 旨在用于单个元素。所以我们只需要创建一个函数并使用each() 遍历每个元素。现在我们可以每次调用函数，将panzoom() 方法绑定到每个元素（单独）。

JSFiddle（仅编辑过的 JS）

http://jsfiddle.net/6upt2gn3/4/

【讨论】：