Im using a combination of softwares to achieve a slideshow/lightbox/zoom and pan effect and have reached a barrier with the Panzoom module. My code works like this, the server pre-loads the images that will go into the slideshow and on loading the page, the images are loaded into the carousel (Swiper). Then on clicking an image, the image is opened in a lightbox (GLightbox) and since the zoom function offered with that isnt accurate enough, I wanted to plugin a third software to allow scroll wheel zooming and panning.

HTML:

<div class="swiper mySwiper" id="mySwiper">
     <div class="swiper-wrapper" id="load">
     <% for(let img of images) { %>
        <div class="swiper-slide d-flex align-items-stretch align-items-center justify-content-center"><img class="glightbox img-fluid" src='<%=img%>'style="height:100%;width:auto" data-zoomable="false" data-draggable="false"></div>
      <% } %>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

here is how Ive implemented the click event for applying the panzoom zoomWithWheel function:

$(document).ready(
()=>{
    $('.glightbox').click(
        ()=>{
            const elmt=$('.gslide-media img')[0];
            console.log(elmt);
            const panzoom=Panzoom(elmt);
            $(elmt).on('wheel', panzoom.zoomWithWheel)
        }          
    )       
})

Pan seems to work fine but my problem now is the scrolling only zooms OUT the image in the lightbox. Help Please!