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

CSS

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

.slides {
  width: 100%;
  height: 100%;
}

FIGURE {
  margin: 0;
  width: 50%;
  display: block;
  float: left;
  position: relative;
  overflow: hidden;
}

FIGURE A {
  display: block;
  width: 100%;
}

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

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

JavaScript

// 
$(function() {

  // Instantiate EasyZoom instances
  var $easyzoom = $('.easyzoom').easyZoom();

  // Get an instance API
  var api = $easyzoom.data('easyZoom');

});