Efecto lupa con Elementor

				
					.magnify{
  border-radius: 50%;
  border: 2px solid black;
  position: absolute;
  z-index: 20;
  background-repeat: no-repeat;
  background-color: white;
  box-shadow: inset 0 0 20px rgba(0,0,0,.5);
  display: none;
  cursor: none;
}
				
			
				
					<script>var $m = jQuery;
$m(document).ready(function() {
var magnifierSize = 250;
var magnification = 4;
function magnifier() {
  this.magnifyImg = function(ptr, magnification, magnifierSize) {
    var $pointer;
    if (typeof ptr == "string") {
      $pointer = $m(ptr);
    } else if (typeof ptr == "object") {
      $pointer = ptr;
    }
    if(!($pointer.is('img'))){
      alert('Object must be image.');
      return false;
    }
    magnification = +(magnification);
    $pointer.hover(function() {
      $m(this).css('cursor', 'none');
      $m('.magnify').show();
      var width = $m(this).width();
      var height = $m(this).height();
      var src = $m(this).attr('src');
      var imagePos = $m(this).offset();
      var image = $m(this);

      if (magnifierSize == undefined) {
        magnifierSize = '150px';
      }
      $m('.magnify').css({
        'background-size': width * magnification + 'px ' + height * magnification + "px",
        'background-image': 'url("' + src + '")',
        'width': magnifierSize,
        'height': magnifierSize
      });
      var magnifyOffset = +($m('.magnify').width() / 2);
      var rightSide = +(imagePos.left + $m(this).width());
      var bottomSide = +(imagePos.top + $m(this).height());
      $m(document).mousemove(function(e) {
        if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide + magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e.pageY > +(bottomSide + magnifyOffset / 6)) {
          $m('.magnify').hide();
          $m(document).unbind('mousemove');
        }
        var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification - magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification - magnifyOffset) + "px";
        $m('.magnify').css({
          'left': e.pageX - magnifyOffset,
          'top': e.pageY - magnifyOffset,
          'background-position': backgroundPos
        });
      });
    }, function() {

    });
  };
  this.init = function() {
    $m('body').prepend('<div class="magnify"></div>');
  }
  return this.init();
}
var magnify = new magnifier();
magnify.magnifyImg('img', magnification, magnifierSize);
});</script>
				
			

Si para este tutorial necesitas algún plugin lo podrás encontrar en la pagina de plugins.

Comparte en tus redes sociales

Deja un comentario