photoswipe

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 class="ez-slider">
  <figure>
    <a href="https://i.imgur.com/q5Y5RCH.png">
      <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/8HjXPXD.png">
      <img src="https://i.imgur.com/8HjXPXD.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/vUDcfcy.png">
      <img src="https://i.imgur.com/vUDcfcy.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/okTDHas.png">
      <img src="https://i.imgur.com/okTDHas.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/x7ZYW4i.png">
      <img src="https://i.imgur.com/x7ZYW4i.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/EYTCssm.png">
      <img src="https://i.imgur.com/EYTCssm.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/3sAFPmL.png">
      <img src="https://i.imgur.com/3sAFPmL.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/IqLrd0o.png">
      <img src="https://i.imgur.com/IqLrd0o.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/6JplNl6.png">
      <img src="https://i.imgur.com/6JplNl6.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/6X5GKWJ.png">
      <img src="https://i.imgur.com/6X5GKWJ.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/SefTwI1.png">
      <img...

CSS

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

/* The minor fix I added to get demo working */

.ez-slider .easyzoom .easyzoom-flyout {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Slide demo css not needed */

.ez-slider FIGURE {
  height: 150px;
  margin: 0;
  width: 50%;
  display: block;
  float: left;
  position: relative;
  overflow: hidden;
}

.ez-slider FIGURE A {
  display: block;
  width: 100%;
}

.ez-slider FIGURE A:after {
  content: '';
  display: block;
  padding-top: 100%;
  height: 0;
}

.ez-slider FIGURE A IMG {
  width: 101%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

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

.ez-slider .slick-dots {
  margin-top: 5px;
  position: relative;
  bottom: 0;
}

.ez-slider .slick-dots LI {
  width: 75px;
  height: 75px;
  opacity: .8;
}

.ez-slider .slick-dots LI.slick-active {
  opacity: 1;
}

.ez-slider .slick-dots LI.slick-active BUTTON,
.ez-slider .slick-dots LI:hover BUTTON {
  opacity: 1;
  transform: scale(1,1);
}

.ez-slider .slick-dots LI BUTTON {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  transition: all .5s ease;
  transform: scale(.75,.75);
}

.ez-slider .slick-dots LI BUTTON IMG {
  display: block;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.ez-slider .slick-dots LI BUTTON:before {
  display: block;
  position: relative;
  content: '';
  width: 100%;
  padding-top: 100%;
  height: auto;
}

JavaScript

// the most basic init
// my slick slider as constant object
$('.ez-slider').on('init', function(slick) {

  // slide var for timeout use
  let slider = this;
	
  // slight delay so init completes render
  setTimeout(function() {
  
    // init the easy zoom
    $('FIGURE', slider).addClass('easyzoom').easyZoom();

    // dot buttons
    let thumbs = $('.slick-dots > LI > BUTTON', slider);

    // each dot button function
    $.each(thumbs, function(i,e) {

      // slide id
      let slide_id = $(this).attr('aria-controls');
      
      // custom dot image
      let thumb_img = $('#'+slide_id).find('IMG').attr('src');
      
      $(this).html('<img src="' + thumb_img + '" alt="" />');

    });

  }, 100);


}).slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true
});