Estoy usando una combinación de software para lograr un efecto de presentación de diapositivas/caja de luz/zoom y panorámica y he llegado a una barrera con el módulo Panzoom . Mi código funciona así, el servidor precarga las imágenes que irán a la presentación de diapositivas y al cargar la página, las imágenes se cargan en el carrusel ( Swiper ). Luego, al hacer clic en una imagen, la imagen se abre en una caja de luz ( GLightbox ) y dado que la función de zoom que se ofrece con eso no es lo suficientemente precisa, quería conectar un tercer software para permitir el zoom y la panorámica con la rueda de desplazamiento.

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>

Así es como implementé el evento de clic para aplicar la función panzoom zoomWithWheel:

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

Pan parece funcionar bien, pero mi problema ahora es que el desplazamiento solo aleja la imagen en la caja de luz. ¡Ayuda por favor!