photoswipe

by joshmoto

HTML

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

CSS

.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: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

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

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