将 JQuery 图像放大功能与动态 Bootstrap 5 走马灯集成

Question

我有一个WordPress画廊网站，其中图像在Bootstrap 5模态框中打开，该模态框打开了Bootstrap Carousel。

这些图像通过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>

这是插件中用于跟踪缩放坐标的JQuery代码：

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

    })

- SMae

Answer 1

关键在于将“缩放图像坐标”从“$(element)”更改为“$(this)”。

我还将所有的“var”更改为“const”。

这是最终代码，使其正常工作...

     
/**
 * blowup.js
 * Paul Krishnamurthy 2016
 *
 * https://paulkr.com
 * [e-mail]
 */

 (function ($) {
  $.fn.blowup = function (attributes) {

    const $element = this;

    // If the target element is not an image
    if (!$element.is("img")) {
      console.log("%c Blowup.js Error: " + "%cTarget element is not an image.",
        "background: #FCEBB6; color: #F07818; font-size: 17px; font-weight: bold;",
        "background: #FCEBB6; color: #F07818; font-size: 17px;");
      return;
    }

    // Default attributes
    const defaults = {
      round         : true,
      width         : 200,
      height        : 200,
      background    : "transparent",
      shadow        : "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
      border        : "6px solid #FFF",
      cursor        : true,
      zIndex        : 999999,
      scale         : 1,
      customClasses : ""
    }

    // Update defaults with custom attributes
    const $options = $.extend(defaults, attributes);

    // Modify target image
    $element.on('dragstart', function (e) { e.preventDefault(); });
    $element.css("cursor", $options.cursor ? "crosshair" : "none");

    // Create magnification lens element
    const lens = document.createElement("div");
    lens.id = "BlowupLens";

    // Attach the element to the body
    $("body").append(lens);

    // Updates styles
    $blowupLens = $("#BlowupLens");

    $blowupLens.css({
      "position"          : "absolute",
      "display"           : "none",
      "pointer-events"    : "none",
      "zIndex"            : $options.zIndex,
      "width"             : $options.width,
      "height"            : $options.height,
      "border"            : $options.border,
      "background"        : $options.background,
      "border-radius"     : $options.round ? "50%" : "none",
      "box-shadow"        : $options.shadow,
      "background-repeat" : "no-repeat",
    });

    // Add custom CSS classes
    $blowupLens.addClass($options.customClasses);

    // Show magnification lens
    $element.mouseenter(function () {
      $blowupLens.css("display", "block");
    })

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

      // Constants
      const $IMAGE_URL    = $('.active').find('img').attr('src');
      const NATIVE_IMG    = new Image();
      NATIVE_IMG.src    = $('.active').find('img').attr('src');

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

      // Relative coordinates of image
      const relX = e.pageX - $(this).offset().left;
      const relY = e.pageY - $(this).offset().top;

      // Zoomed image coordinates
      zoomX =-6 -Math.floor(relX / $(this).width() * (NATIVE_IMG.width * $options.scale) - $options.width / 2);
      zoomY =-6 -Math.floor(relY / $(this).height() * (NATIVE_IMG.height * $options.scale) - $options.height / 2);
  
      const backPos = zoomX + "px " + zoomY + "px";
      const backgroundSize = NATIVE_IMG.width * $options.scale + "px " + NATIVE_IMG.height * $options.scale + "px";

      // Apply styles to lens
      $blowupLens.css({
        left                  : lensX,
        top                   : lensY,
        "background-image"    : "url(" + encodeURI($IMAGE_URL) + ")",
        "background-size"     : backgroundSize,
        "background-position" : backPos
      });
    })

    // Hide magnification lens
    $element.mouseleave(function () {
      $blowupLens.css("display", "none");
    });
  }
    })(jQuery);
    

// Artwork Magnification 

(function ($) {

    $(".img-zoom").blowup()

})(jQuery);

- SMae