Slick slider & Panzoom

ATTEMPT TO ADD FOCAL

by princeofabyss

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/4.0.0/panzoom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css">
<div id="frontpages-main-slider">
  <div id="frontpages-slider-area">
    <div id="frontpages-magnifier-icon"><i class="fa fa-search-plus" aria-hidden="true"></i>
      <p>OFF</p>
    </div>
    <a href="#">
      <div id="frontpages-previous-publication"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
    </a>
    <div id="frontpages-switch-covers"><i class="fa fa-refresh" aria-hidden="true"></i></div>
    <a href="#">
      <div id="frontpages-next-publication"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
    </a>
    <div class="main">
      <div class="frontpages-full-size-publication"><img src="https://i.ibb.co/PFSfc0g/landscape-sun-beams-belgium-ardennes.jpg"></div>
      <div class="frontpages-full-size-publication"><img src="https://i.ibb.co/St1Tz6C/landscape-new-zealand-S-shape.jpg"></div>
    </div>
  </div>
</div>

CSS

#frontpages-main-slider {
  display: block;
  width: 638px;
  height: 424px;
  background: #f00;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
}

#frontpages-slider-area {
  position: relative;
}

#frontpages-slider-area::before,
#frontpages-slider-area::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  border-color: transparent;
  border-style: solid;
}

#frontpages-slider-area::after {
  border-width: 45px;
  border-top-color: rgba(100, 100, 100, 0.8);
  border-right-color: rgba(100, 100, 100, 0.8);
}

#frontpages-magnifier-icon {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  padding: 8px 8px 8px 25px;
  color: rgba(255, 255, 255, 0.8);
  z-index: 1;
}

#frontpages-magnifier-icon p {
  transform: rotate(45deg);
  user-select: none;
  margin: 0 0 0 -25px;
}

#frontpages-previous-publication,
#frontpages-switch-covers,
#frontpages-next-publication {
  position: absolute;
  background: #fff;
  border-style: solid;
  border-color: #000;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
  line-height: 1;
  padding: 10px;
  color: #faa61c;
  z-index: 1;
}

#frontpages-previous-publication {
  top: 100px;
  left: -1px;
  border-width: 1px 1px 1px 0;
  border-radius: 0 6px 6px 0;
}

#frontpages-switch-covers {
  font-weight: bold;
  top: -1px;
  left: 50%;
  transform: translate(-50%, 0);
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 6px 6px;
}

#frontpages-next-publication {
  top: 100px;
  right: -1px;
  border-width: 1px 0 1px 1px;
  border-radius: 6px 0 0 6px;
}

.main img {
  display: block;
  margin: 0 auto;
}

JavaScript

function cycle(reset = false) {
  var labels = ['OFF', '1.2x', '1.4x', '1.6x', '1.8x', '2.0x', '2.2x', '2.4x', '2.6x', '2.8x', '3.0x'];
  var counter = labels.indexOf($('#frontpages-magnifier-icon p').text());

  if (counter === labels.length - 1 || reset) {
    counter = 0;
  } else {
    counter++;
  }

  $('#frontpages-magnifier-icon p').text(labels[counter]);
}

function zoom() {
  const slide = $('.main .slick-current img')[0];
  const panzoom = slide.panzoom || (slide.panzoom = Panzoom(slide, {
    contain: 'outside',
    disableZoom: true
  }));
  const magnifier = $('#frontpages-magnifier-icon p');

  if (magnifier.text() != 'OFF') {
    var factor = magnifier.text().substring(0, 3);

    var xxx = Number.parseFloat($('.main .slick-current img').css('transform').split(',')[4]);
    var yyy = Number.parseFloat($('.main .slick-current img').css('transform').split(',')[5]);

    panzoom.zoom(factor, {
      force: true
    });

    console.log(xxx + ' ' + yyy);
  } else {
    panzoom.reset({
      force: true,
      animate: false
    });
  }
}

$(document).ready(function() {
  $('.main').slick({
    arrows: false,
    draggable: false,
    swipe: false,
    adaptiveHeight: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    swipeToSlide: true,
  }).on('beforeChange', function() {
    cycle(true);
    zoom();
  }).on('afterChange', function() {
    zoom();
  });

  $('#frontpages-switch-covers').click(function() {
    $('.main').slick('slickNext');
  });

  $('#frontpages-magnifier-icon').click(function() {
    cycle();
    zoom();
  });

  $('.main .slick-current img').on('touchmove', function(event) {
    event.preventDefault();
  });

  zoom();
});