Galerie photos 5

by Simon Hi

HTML

<div class="p_s_h">
  <div class="p_s_h__thumbs">
    <img crossorigin alt="Colibri" src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Sparkling_Violetear_%28Colibri_coruscans%29_1.jpg" loading="lazy" />
    <img crossorigin alt="Football américain" 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 crossorigin alt="Îles Canaries" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Typical_Paella_in_Canary_Islands.jpg" loading="lazy" />
    <img crossorigin alt="Eolienne" src="https://upload.wikimedia.org/wikipedia/commons/6/62/%C3%89olienne_du_Breuil_%28Ch%C3%A9digny%29.jpg" loading="lazy" />
    <img crossorigin alt="Bateau" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Bateau_%28PSF%29.png/640px-Bateau_%28PSF%29.png" loading="lazy" />
    <img crossorigin alt="Colibri" 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 crossorigin alt="Baleine" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Baleine_%C3%A0_bosse_et_son_baleineau_2.jpg" loading="lazy" />
    <img crossorigin alt="Le Kilimanjaro et des éléphants" src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Elephants_at_Amboseli_national_park_against_Mount_Kilimanjaro.jpg" loading="lazy" />
    <img crossorigin alt="Timbre" 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 crossorigin alt="Colibri" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Colibri_coruscans_1841.jpg/800px-Colibri_coruscans_1841.jpg" loading="lazy" />
    <img crossorigin alt="Strauss" src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Strauss_Monument.JPG" loading="lazy" />
    <img...

CSS

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

.p_s_h {
  --deltaBlur: 2em;
}

.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;
  background: #777;
}

.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(var(--deltaBlur)) brightness(75%);
  top: calc(-1 * var(--deltaBlur));
  left: calc(-1 * var(--deltaBlur));
  right: calc(-1 * var(--deltaBlur));
  width: calc(100vmax + (2 * var(--deltaBlur)));
  height: calc(100vmax + (2 * var(--deltaBlur)));
}

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

.p_s_h__slider img.ghost {
  display: none;
}

.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;
  margin: 0;
  padding: 1em;
  transition: opacity 1s;
}

.p_s_h__slider button svg {
  display: block;
  width: 2em;
  height: 2em;
  stroke: #fff;
  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%;
...

JavaScript

(function() {
  let elem = document.querySelector('.p_s_h');
  let loadingTimeoutId, ghostTimeoutId, srcForGhost;
  // strings to translate
  let i18n = {
    Close: "Fermer",
    Pred: "Précédent",
    Next: "Suivant",
    Loading: "Chargement"
  };
  // parameters
  // btnHasTitle: show/hide tooltips on buttons
  let btnHasTitle = 0;
  // fadeOutOn: fade-out the limpid image
  let fadeOutOn = 1;
  // 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 getAverageRGB(imgEl) {
    // adapted from https://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript
    let blockSize = 42, // only visit every 42 pixels
      defaultRGB = {
        r: 127,
        g: 127,
        b: 127
      }, // for non-supporting envs
      canvas = document.createElement('canvas'),
      context = canvas.getContext && canvas.getContext('2d'),
      data, width, height,
      k = -4 * blockSize,
      km,
      rgb = {
        r: 0,
        g: 0,
        b: 0
      },
      count = 0;
    if (!context) return defaultRGB;
    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;
    context.drawImage(imgEl, 0, 0);
    try {
      data = context.getImageData(0, 0, width, height);
    } catch (e) {
      return defaultRGB;
    } // security error, img on diff domain?
    km = data.data.length;
    while ((k += blockSize * 4) < km) {
      ++count;
      rgb.r += data.data[k];
      rgb.g += data.data[k + 1];
      rgb.b += data.data[k + 2];
    }
    // ~~ used to floor values
    rgb.r = ~~(rgb.r /...