Comment créer des effets de loupe multiples et distincts au survol de la page

Question

L'effet de loupe est important, comme le montre l'illustration ici

$(document).ready(function() {
  var native_width = 0;
  var native_height = 0;

  $(".large").css("background", "url('" + $(".small").attr("src") + "') no-repeat");

  $(".magnify").mousemove(function(e) {
    if (!native_width && !native_height) {
      var image_object = new Image();
      image_object.src = $(".small").attr("src");
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      var magnify_offset = $(this).offset();
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {

        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;

        $(".large").css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})

* {
  margin: 0;
  padding: 0;
}

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
  cursor: none
}

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
}

.small {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="magnify">
  <div class="large"></div>
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200" />
</div>

Ce que j'aimerais faire, c'est avoir plusieurs instances séparées. J'ai essayé de faire une copie du HTML et de modifier les CSS/JS, mais je n'arrive pas à séparer l'effet de loupe, il est simplement dupliqué pour les deux ou ne se produit pas du tout.

Answer 1

Pour remédier à ce problème, vous devez faire référence au .small y .large à l'intérieur de chaque .magnify au lieu de les récupérer tous en même temps dans le DOM.

Pour ce faire, vous pouvez utiliser $(this).find() au sein de la mousemove sur l'événement .magnify comme suit :

$(document).ready(function() {
  var native_width = 0;
  var native_height = 0;

  $(".large").css("background", function() {
    return "url('" + $(this).next(".small").attr("src") + "') no-repeat"
  });

  $(".magnify").mousemove(function(e) {
    // retrieve the related elements here:
    var $this = $(this),
      $small = $this.find('.small'),
      $large = $this.find('.large');

    // ... and use them in the below code block:
    if (!native_width && !native_height) {
      var image_object = new Image();
      image_object.src = $small.attr("src");
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      var magnify_offset = $this.offset();
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      if (mx < $this.width() && my < $this.height() && mx > 0 && my > 0) {
        $large.fadeIn(100);
      } else {
        $large.fadeOut(100);
      }
      if ($large.is(":visible")) {
        var rx = Math.round(mx / $small.width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $small.height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";
        var px = mx - $large.width() / 2;
        var py = my - $large.height() / 2;

        $large.css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})

* {
  margin: 0;
  padding: 0;
}

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
  cursor: none
}

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
  z-index: 10; /* add this to stop the cropping of the magnifier */
}

.small {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="magnify">
  <div class="large"></div>
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200" />
</div>

<div class="magnify">
  <div class="large"></div>
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200" />
</div>

Notez également l'ajout de z-index dans le CSS de la .large pour arrêter l'écrêtage lorsqu'on se déplace entre des éléments zoomables.