php - Integrate JQuery Image Magnification with Dynamic Bootstrap 5 Carousel

one text

I have a Wordpress gallery site where images open up in a Bootstrap 5 Modal, which opens up a Bootstrap Carousel.

The images are loaded in a post loop with a php foreach loop, one per slide.

I am trying to add hover magnification to each image with a small circle using blowup.js.

I have the zoom function moving correctly with each slide, however only the first image tracks where the mouse is. Subsequent magnifications are stuck on the top left corner.

Here is my Function:

(function ($) {
    
    // Update blowup when slide changes
    $("#gallery-carousel").on('slide.bs.carousel', function (){
        $(".img-zoom").blowup("destroy");
    });

    $("#gallery-carousel").on('slid.bs.carousel', function (){
        $(".img-zoom").blowup()
    });
      
})(jQuery);
      

This is the code that the function targets within the Carousel:

<div class="carousel-item">

 <div class="position-relative carousel-img">
      <img class="img-fluid img-zoom" src="<?php echo $image_url; ?>" />                                
 </div>

</div>

This is the JQuery in the plugin that is meant to track the zoomed coordinates:

  // Mouse motion on image
    $element.mousemove(function (e) {

      // Lens position coordinates
      var lensX = e.pageX - $options.width / 2;
      var lensY = e.pageY - $options.height / 2;

      // Relative coordinates of image
      var relX = e.pageX - $(this).offset().left;
      var relY = e.pageY - $(this).offset().top;
     
      // Zoomed image coordinates 
      var zoomX = -Math.floor(relX / $element.width() * (NATIVE_IMG.width * $options.scale) - $options.width / 2);
      var zoomY = -Math.floor(relY / $element.height() * (NATIVE_IMG.height * $options.scale) - $options.height / 2);

      var backPos = zoomX + "px " + zoomY + "px";
      var backgroundSize = NATIVE_IMG.width * $options.scale + "px " + NATIVE_IMG.height * $options.scale + "px";

    })