Galerie photos 2

by Simon Hi

HTML

<div class="p_s_h">
  <div class="p_s_h__thumbs">
    <img src="http://unsplash.it/600/400?image=940" loading="lazy" />
    <img src="http://unsplash.it/640/450?image=906" loading="lazy" />
    <img src="http://unsplash.it/550/420?image=885" loading="lazy" />
    <img src="http://unsplash.it/650/450?image=823" loading="lazy" />
    <img src="http://unsplash.it/600/350?image=815" loading="lazy" />
    <img src="http://unsplash.it/560/500?image=677" loading="lazy" />
    <img src="http://unsplash.it/670/410?image=401" loading="lazy" />
    <img src="http://unsplash.it/620/340?image=623" loading="lazy" />
    <img src="http://unsplash.it/790/390?image=339" loading="lazy" />
  </div>
  <div class="p_s_h__fullscreen"></div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  background: #000;
}

.p_s_h__thumbs {
  columns: 3;
  column-gap: 0;
}

.p_s_h__thumbs img {
  display: block;
  width: 100%;
  cursor: pointer;
}

.p_s_h__fullscreen {
  display: none;
}

.p_s_h[data-action="showOne"] .p_s_h__thumbs {
  display: none;
}

.p_s_h[data-action="showOne"] .p_s_h__fullscreen {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #000;
}

.p_s_h__fullscreen .slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.p_s_h__fullscreen img.blurred {
  position: absolute;
  z-index: 1;
  filter: blur(2em) brightness(50%);
  width: 100vmax;
  height: auto;
}

.p_s_h__fullscreen img.limpid {
  position: relative;
  z-index: 2;
  max-width: 100vw;
  max-height: 100vh;
  opacity: 0;
}

.p_s_h__fullscreen button {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  display: block;
  border-radius: 50%;
  border: 0;
  background: #0003;
  color: #fff;
  opacity: 0;
  min-width: 4em;
  min-height: 4em;
  margin: 0;
  padding: 1em;
  transition: opacity 1s;
}

.p_s_h__fullscreen button svg {
  display: block;
  width: 2em;
  height: 2em;
  pointer-events: none;
}

.p_s_h__fullscreen button.close {
  opacity: 1;
  z-index: 4;
}

.p_s_h__fullscreen button:hover,
.p_s_h__fullscreen button:focus {
  background: #0006;
  opacity: 1;
  cursor: pointer;
}

.p_s_h__fullscreen button.pred {
  left: 2em;
  top: 50%;
  margin-top: -2em;
}

.p_s_h__fullscreen button.next {
  right: 2em;
  top: 50%;
  margin-top: -2em;
}

.p_s_h__fullscreen button.close {
  top: 2em;
  left: 2em;
}

.superBtn {
  position: absolute;
  z-index: 3;
  width: 33%;
  height: 100%;
}

.superBtn:hover {
  cursor: pointer;
}

.superBtn:first-of-type {
  left: 0;
}

.superBtn:last-of-type {
  right: 0;
}

JavaScript

(function() {
  var elem = document.querySelector('.p_s_h');

  function addClickHandlerToImg(img) {
    img.addEventListener('click', function(ev) {
      let s = "",
        b, limpidWhenInit;
      let c = elem.querySelector('.p_s_h__fullscreen');
      let src = ev.target.src;

      function slide(d) {
        let list = elem.querySelectorAll('.p_s_h__thumbs img');
        let k, km = list.length,
          ko;
        let blurred = elem.querySelector('.blurred');
        let limpid = elem.querySelector('.limpid');
        for (k = 0; k < km; k++)
          if (list[k].src == limpid.src) {
            ko = k;
            break;
          }
        if (d > 0) {
          if (ko == (km - 1)) ko = 0;
          else ko++;
        } else {
          if (ko > 0) ko--;
          else ko = km - 1;
        }
        limpid.style.transition = "none";
        limpid.style.opacity = "0";
        limpid.src = list[ko].src;
        blurred.src = list[ko].src;
        limpid.offsetHeight;
        limpid.style.transition = "opacity 1s";
        limpid.style.opacity = "1";
      }
      s += "<img class='blurred' src='" + src + "'>";
      s += "<div class='slider'>";
      s += "<button class='close'><svg fill='none' stroke='#fff' stroke-width='4' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><path d='M38 12L12 38M12 12L38 38'></path></svg></button>";
      s += "<div class='superBtn'><button class='pred'><svg fill='none' stroke='#fff' stroke-width='4' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><path d='M8 24H40M26 9L8 24L26 39'></path></svg></button></div>";
      s += "<img class='limpid' src='" + src + "'>";
      s += "<div class='superBtn'><button class='next'><svg fill='none' stroke='#fff' stroke-width='4' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><path d='M40 24H8M22 9L40 24L22 39'></path></svg></button></div>";
      s += "</div>";
      c.innerHTML = s;
      elem.setAttribute('data-action', "showOne");
      b =...