Galerie photos 4

by Simon Hi

HTML

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

CSS

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

.p_s_h {
  min-width: 100vw;
  min-height: 100vh;
  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;
  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;
  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%;
  height: 100%;
}

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

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

.p_s_h__slider...

JavaScript

(function() {
  let elem = document.querySelector('.p_s_h');
  // strings to translate
  let btnHasTitle = 1;
  let i18n = {
    Close: "Fermer",
    Pred: "Précédent",
    Next: "Suivant",
    Loading: "Chargement"
  };
  // 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 makeLoadingIcon() {
    let s = "";
    s += "<svg viewBox='-24 -24 48 48' xmlns='http://www.w3.org/2000/svg'";
    s += " class='loading'";
    s += " width='4em' height='4em'";
    s += " stroke-linecap='round' fill='none' stroke='black' stroke-width='4'>";
    s += "<path d='M0 -22V-12'/>";
    s += "<path transform='rotate(30)' opacity='0.95' d='M0 -22V-12'/>";
    s += "<path transform='rotate(60)' opacity='0.90' d='M0 -22V-12'/>";
    s += "<path transform='rotate(90)' opacity='0.85' d='M0 -22V-12'/>";
    s += "<path transform='rotate(120)' opacity='0.80' d='M0 -22V-12'/>";
    s += "<path transform='rotate(150)' opacity='0.75' d='M0 -22V-12'/>";
    s += "<path transform='rotate(180)' opacity='0.70' d='M0 -22V-12'/>";
    s += "<path transform='rotate(210)' opacity='0.65' d='M0 -22V-12'/>";
    s += "<path transform='rotate(240)' opacity='0.60' d='M0 -22V-12'/>";
    s += "<path transform='rotate(270)' opacity='0.55' d='M0 -22V-12'/>";
    s += "<path transform='rotate(300)' opacity='0.50' d='M0 -22V-12'/>";
    s += "<path transform='rotate(330)' opacity='0.45' d='M0 -22V-12'/>";
    s += "</svg>";
    return s;
  }

  function makeHtml(src) {
    let s = makeLoadingIcon();
    s += "<img class='blurred' src='" + src + "'>";
    s += "<div class='aroundImg'>";
    s += "<img class='limpid' src='" + src + "'>";
    s += "</div>";
   ...