Bootstrap 5轮播集成blowup.js：仅首图可正常鼠标跟踪放大

我有一个WordPress图库网站，图片在Bootstrap 5模态框的轮播组件中展示，通过PHP foreach循环加载每张图片为独立轮播项。使用blowup.js实现图片悬停圆形放大效果时，切换轮播后放大功能能随轮播项切换，但只有第一张图片能正常跟踪鼠标位置，后续图片的放大框固定在左上角无法移动。

我的函数代码 #

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

轮播项结构代码 #

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

blowup.js中坐标跟踪核心代码 #

// 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";

    })

问题原因及解决办法 #

核心原因 #

未激活的carousel-item默认是隐藏状态（display: none），blowup.js初始化隐藏元素时无法获取正确的offset()和尺寸值，后续显示时坐标计算逻辑沿用了错误的初始值，导致放大框位置固定。同时当前代码对所有.img-zoom批量操作，容易引发事件绑定冲突。

修复步骤 #

1. 仅针对当前激活轮播项操作blowup
   轮播切换前后只处理当前显示的图片，避免影响隐藏元素：

   (function ($) {
       // 切换前销毁当前激活项的blowup实例
       $("#gallery-carousel").on('slide.bs.carousel', function (){
           $(".carousel-item.active .img-zoom").blowup("destroy");
       });
   
       // 切换完成后初始化新激活项的blowup
       $("#gallery-carousel").on('slid.bs.carousel', function (){
           $(".carousel-item.active .img-zoom").blowup();
       });
   
       // 页面加载完成后初始化第一张激活图片
       $(document).ready(function(){
           $(".carousel-item.active .img-zoom").blowup();
       });
   })(jQuery);
   

2. 修改blowup.js的坐标计算逻辑
   原代码中使用初始化时的$element.width()/$element.height()缓存值，替换为实时获取当前元素尺寸，确保显示后能拿到正确值：

   // Mouse motion on image
   $element.mousemove(function (e) {
     // 保留原有代码...
     
     // 替换坐标计算中的尺寸获取方式
     var zoomX = -Math.floor(relX / $(this).width() * (NATIVE_IMG.width * $options.scale) - $options.width / 2);
     var zoomY = -Math.floor(relY / $(this).height() * (NATIVE_IMG.height * $options.scale) - $options.height / 2);
     
     // 保留原有代码...
   })
   

3. 验证模态框定位影响
   如果问题仍存在，检查模态框的定位层级，确保offset()计算的是相对于文档的正确位置，一般模态框使用position: fixed时无需额外调整，优先测试前两步即可。

内容的提问来源于stack exchange，提问作者SMae