[SOLVED] multiple panzoom's on one page

multiple panzoom's on one page

I'm using this panzoom library, however I'm struggling to get it to work multiple instances on the same page with custom options.

Here is a jsFiddle which allows for multiple panzooms all with the same 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>

However I can't figure out how to add any custom options to it?

Here is a jsFiddle, which has my custom options, but I can't get it to work alongside the forEach and work with multiple instances with the same class on the same page. You can see in the fiddle how only the first one works.

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>

Solution

I managed to fix my issue with the below:

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