EasyZoom and Slick jQuery

https://stackoverflow.com/q/64470545

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/easyzoom.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/easyzoom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<div id="imagePane">
  <figure>
     <a href="#" title="Zoom" 
       data-img-zoom
       data-img-original="https://i.imgur.com/Wm8wUin.jpg"
       data-img-scale=""
       data-img-x="1740"
       data-img-y="2019"
     >
       <img src="https://i.imgur.com/Wm8wUin.jpg" alt="Wm8wUin" />
     </a>
  </figure>
</div>

<div id="imageZoom">
  <div class="track">
    <img src="" alt="" />
  </div>
</div>

SCSS

BODY {
  margin: 0;
  padding: 15px;
}

#imagePane {
  
  FIGURE {
    max-width: 400px;
    display: block;
    margin: 0;
    padding: 0;

    > A {
      display: block;

      > IMG {
        display: block;
        width: 100%;
      }

    }
    
  }  

}

#imageZoom {
  position: fixed;
  top: 0;
  right: 100%;
  bottom: 100%;
  left: 0;
  background: rgba(0, 0, 0, .75);
  padding: 0;
  opacity: 0;
  transition: opacity .5s ease;

  &.open {
    cursor: crosshair;
    padding: 15px;
    right: 0;
    bottom: 0;
    opacity: 1;
  }

  >.track {
    width: 100%;
    background: red;
    min-height: 100%;
    position: relative;



    >IMG {
      display: block;
      width: 100%;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
    }


  }
}

JavaScript

const imageZoom = $('#imageZoom');
const imageMatrix = {};

// 
$(document).on('click', '[data-img-zoom]', function(e) {

  // prevent default
  e.preventDefault();
  
  // set the image matrix image dimensions
  imageMatrix.imgX = $(this).data('img-x');
  imageMatrix.imgY = $(this).data('img-y');

  // set the original image to the image zoom src
  $('IMG', imageZoom).attr('src', $(this).data('img-original') );

  if (imageMatrix.imgX > imageMatrix.imgY) {

    imageMatrix.ratioX = 1;
    imageMatrix.ratioY = (100 / imageMatrix.imgX) * imageMatrix.imgY;

    $(imageZoom).find('IMG').css({
      width: '100%',
      height: 'auto'
    });

  } else if (imageMatrix.imgX < imageMatrix.imgY) {

    imageMatrix.ratioX = (100 / imageMatrix.imgY) * imageMatrix.imgX;
    imageMatrix.ratioY = 1;

    $(imageZoom).find('IMG').css({
      width: 'auto',
      height: '100%'
    });

  } else {

    imageMatrix.ratioX = 1;
    imageMatrix.ratioY = 1;

  }





  $(imageZoom).addClass('open');


});

// mouse move on event
$(imageZoom).on('mousemove', '.track', function(e) {

  console.clear();

  // get our current matrix data
  imageMatrix.trackX = $(this).outerWidth();
  imageMatrix.trackY = $(this).outerHeight();
  imageMatrix.mouseX = e.pageX - ($(document).scrollLeft() + 14);
  imageMatrix.mouseY = e.pageY - ($(document).scrollTop() + 14);

  console.log(imageMatrix);

});

$(window).on('resize', function(e) {

  console.clear();

  imageMatrix.trackX = $(imageZoom).outerWidth();
  imageMatrix.trackY = $(imageZoom).outerHeight();
  
  console.log(imageMatrix);

});