0

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

这是一个jsFiddle，它允许多个 panzoom 都具有相同的类。

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工作，并在同一页面上使用具有相同类的多个实例。您可以在小提琴中看到只有第一个是如何工作的。

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>

4

1 回答 1

0

我设法用以下方法解决了我的问题：

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
    });
});
于 2021-07-12T21:38:54.537 回答