一页上的多个 panzoom

Question

我正在使用这个 panzoom library，但是我很难让它在同一页面上使用自定义选项工作多个实例。

这是一个 jsFiddle，它允许使用相同的 class.

进行多个全景缩放

const paths = document.querySelectorAll('.content-image-module .image-pinch img')
    paths.forEach(Panzoom)

.image-pinch {
    min-height: 360px;
    height: 100%;
    max-height: 414px;
    width: 100%;
    overflow: hidden;
    background: red
    z-index: 9999;
    position: relative;
}

img {
        width: initial;
        max-width: 2000px;
        position: initial;
        -webkit-transform: initial;
        -ms-transform: initial;
        transform: initial;
        max-width: initial;
        cursor: crosshair;
    }

<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.4.1/dist/panzoom.min.js"></script>
<section class="content-image-module">
  <div class="image-pinch">
    <img src="https://images.unsplash.com/photo-1622495505508-03991221aca7?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80"/>
  </div>
</section>

<section class="content-image-module">
  <div class="image-pinch">
    <img src="https://images.unsplash.com/photo-1622495505508-03991221aca7?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80"/>
  </div>
</section>

<section class="content-image-module">
  <div class="image-pinch">
    <img src="https://images.unsplash.com/photo-1622495505508-03991221aca7?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80"/>
  </div>
</section>

但是我不知道如何向它添加任何自定义选项？

这是一个 jsFiddle，它有我的自定义选项，但我无法让它与 forEach 一起工作，也无法使用具有相同 class 的多个实例同一页。您可以在 fiddle 中看到只有第一个是如何工作的。

const elem = document.querySelector('.content-image-module .image-pinch img')
    const panzoom = Panzoom(elem, {
        maxScale: 5,
        minScale: 1,
        maxScale: 3,
        contain: 'outside',
        disableZoom: false,
    })

.image-pinch {
    min-height: 360px;
    height: 100%;
    max-height: 414px;
    width: 100%;
    overflow: hidden;
    background: red
    z-index: 9999;
    position: relative;
}

img {
        width: initial;
        max-width: 2000px;
        position: initial;
        -webkit-transform: initial;
        -ms-transform: initial;
        transform: initial;
        max-width: initial;
        cursor: crosshair;
    }

<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.4.1/dist/panzoom.min.js"></script>
<section class="content-image-module">
  <div class="image-pinch">
    <img src="https://images.unsplash.com/photo-1622495505508-03991221aca7?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80"/>
  </div>
</section>

<section class="content-image-module">
  <div class="image-pinch">
    <img src="https://images.unsplash.com/photo-1622495505508-03991221aca7?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80"/>
  </div>
</section>

<section class="content-image-module">
  <div class="image-pinch">
    <img src="https://images.unsplash.com/photo-1622495505508-03991221aca7?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80"/>
  </div>
</section>

Answer 1

我设法解决了以下问题：

const paths = document.querySelectorAll('.content-image-module .image-pinch img')
paths.forEach((elem) => {
    const panzoom = Panzoom(elem, {
        maxScale: 5,
        minScale: 1,
        maxScale: 3,
        contain: 'outside',
        disableZoom: false
    });
});

一页上的多个 panzoom

multiple panzoom's on one page

html

javascript

jquery

panzoom