Galerie photos 3

by Simon Hi

HTML

<div class="p_s_h">
  <div class="p_s_h__thumbs">
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Sparkling_Violetear_%28Colibri_coruscans%29_1.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/University_of_Nevada_Wolf_Pack_31%2C_Purdue_University_Boilermakers_31%2C_Mackay_Stadium%2C_Reno%2C_Nevada_-_48657118332.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Typical_Paella_in_Canary_Islands.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/%C3%89olienne_du_Breuil_%28Ch%C3%A9digny%29.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Bateau_%28PSF%29.png/640px-Bateau_%28PSF%29.png" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/050305_Brown_Violet-ear_crop.jpg/800px-050305_Brown_Violet-ear_crop.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Baleine_%C3%A0_bosse_et_son_baleineau_2.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Elephants_at_Amboseli_national_park_against_Mount_Kilimanjaro.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Timbre_retraite_type_Merson_1931.jpg/640px-Timbre_retraite_type_Merson_1931.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Colibri_coruscans_1841.jpg/800px-Colibri_coruscans_1841.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Strauss_Monument.JPG" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/MonographTrochi4Goul_0094.jpg/800px-MonographTrochi4Goul_0094.jpg" loading="lazy" />
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Blue_Hour_at_Pakistan_Monument.jpg/640px-Blue_Hour_at_Pakistan_Monument.jpg" loading="lazy" />
    <img...

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__slider {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

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

.p_s_h[data-action="showOne"] .p_s_h__slider {
  display: block;
}

.p_s_h__slider .aroundImg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
}

.p_s_h__slider img.blurred {
  position: absolute;
  z-index: 1;
  display: block;
  filter: blur(2em) brightness(75%);
  top: -2em;
  left: -2em;
  bottom: -2em;
  right: -2em;
  width: calc(100vmax + 4em);
  height: calc(100vmax + 4em);
}

.p_s_h__slider img.limpid {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  opacity: 0;
  margin: auto;
}

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

.p_s_h__slider button svg {
  display: block;
  pointer-events: none;
}

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

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

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

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

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

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

.p_s_h__slider .aroundBtn:hover {
  cursor: pointer;
}

.p_s_h__slider .aroundBtn:first-of-type {
  left: 0;
}

.p_s_h__slider .aroundBtn:last-of-type {
  right: 0;
}

JavaScript

(function() {
  let elem = document.querySelector('.p_s_h');
  // transitionMode: "opacity" or "topLeftBottomRight"
  let transitionMode = "topLeftBottomRight";

  function getViewportWidth() {
    return window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  }

  function getViewportHeight() {
    return window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
  }

  function makeHtml(src) {
    let s = "";
    s += "<img class='blurred' src='" + src + "'>";
    s += "<div class='aroundImg'>";
    s += "<img class='limpid' src='" + src + "'>";
    s += "</div>";
    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='aroundBtn'><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 += "<div class='aroundBtn'><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>";
    return s;
  }

  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++;
      else ko = 0;
    } else {
      if (ko > 0) ko--;
      else ko = km - 1;
    }
    limpid.style.transition = "none";
    limpid.style.opacity = "0";
    limpid.offsetHeight;
    limpid.onload = function() {
      this.style.transition = "opacity 1s";
      this.style.opacity = "1";
    };
  ...