photoswipe

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/js/lightgallery-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/css/lightgallery.min.css">
<div class="grid">
  <figure>
    <a href="https://i.imgur.com/q5Y5RCH.png" class="lightgallery">
      <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/8HjXPXD.png" class="lightgallery">
      <img src="https://i.imgur.com/8HjXPXD.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/vUDcfcy.png" class="lightgallery">
      <img src="https://i.imgur.com/vUDcfcy.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/okTDHas.png" class="lightgallery">
      <img src="https://i.imgur.com/okTDHas.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/x7ZYW4i.png" class="lightgallery">
      <img src="https://i.imgur.com/x7ZYW4i.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/EYTCssm.png" class="lightgallery">
      <img src="https://i.imgur.com/EYTCssm.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/3sAFPmL.png" class="lightgallery">
      <img src="https://i.imgur.com/3sAFPmL.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/IqLrd0o.png" class="lightgallery">
      <img src="https://i.imgur.com/IqLrd0o.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/6JplNl6.png" class="lightgallery">
      <img src="https://i.imgur.com/6JplNl6.png" alt="" />
    </a>
  </figure>
  <figure>
...

CSS

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

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

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

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

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

JavaScript

// slick light gallery
$('.grid').lightGallery({
  selector: '.lightgallery'
});