Galerie, 2 img, load event

by Rolf

HTML

<header><h1>Slideshow Demo</h1></header>
<main id="meineBilder" class="galerie">
  <figure><figcaption></figcaption><div><img src="" alt=""></div></figure>
  <figure><figcaption></figcaption><div><img src="" alt=""></div></figure>
  <figure><figcaption></figcaption><div><img src="" alt=""></div></figure>
</main>
<footer>Alle Bilder entstammen dem Wikipedia-Artikel über die Stadt Köln</footer>

CSS

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template: "header header header" auto 
                 "nav main aside" 1fr 
                 "footer footer footer" auto / 10em 1fr 0em;
}
body > header {
  grid-area: header;
}
body > header h1 {
  text-align: center;
}
main {
  grid-area: main;
  overflow: hidden;
}
.galerie {
  position: relative;
}
.galerie figure {
  margin: 0; padding: 0;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #eef;
  display: grid;
  grid-template: "caption" auto "image" 1fr / 1fr;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}
.galerie figcaption {
  grid-area: caption;
}
.galerie figure div {
  grid-area: image;
  height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.galerie figure.aktiv {
  opacity: 1;
}

figure img {
  grid-area: img;
  max-height: 100%;
  max-width: 100%;
  vertical-align: bottom;
}

footer {
  grid-area: footer;
  text-align: center;
  margin-top: 0.5em;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

   const galerieDaten = [
   	{ caption: "Wellkumme<br> en Kölle", 
      url: "https://upload.wikimedia.org/wikipedia/commons/f/f1/DEU_Koeln_COA.svg",
      altText: "Kölner Stadtwappen" 
    },
   	{ caption: "Ein Glas Kölsch", 
      url: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Glas_malz_muehlenkoelsch.jpg/401px-Glas_malz_muehlenkoelsch.jpg",
      altText: "Glas mit Mühlen-Kölsch" 
    },
   	{ caption: "Deutzer Brücke<br>mit Hauptbahnhof und Dom", 
      url: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Stadtbild_K%C3%B6ln_%2850MP%29.jpg/1024px-Stadtbild_K%C3%B6ln_%2850MP%29.jpg",
      altText: "Kölner Stadtpanorama" 
    },
   	{ caption: "Die Zentralmoschee der DITIB", 
      url: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/DITIB-Zentralmoschee_K%C3%B6ln_-_April_2015-7489.jpg/1280px-DITIB-Zentralmoschee_K%C3%B6ln_-_April_2015-7489.jpg",
      altText: "DITIB Zentralmoschee" 
    },
   	{ caption: "Empfangshalle<br>des<br>Hauptbahnhofs", 
      url: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Koelner_Hauptbahnhof_001.jpg/1024px-Koelner_Hauptbahnhof_001.jpg",
      altText: "Hauptbahnhof" 
    },
   	{ caption: "Flughafen Köln/Bonn<br>„Konrad Adenauer“", 
      url: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/K%C3%B6ln_Bonn_Airport_-_Terminal_1-0266.jpg/1280px-K%C3%B6ln_Bonn_Airport_-_Terminal_1-0266.jpg",
      altText: "Terminal des Kölner Flughafens" 
    },
   	{ caption: "Einmol im Johr kütt d'r Rhing us em Bett", 
      url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Bundesarchiv_B_422_Bild-0086%2C_K%C3%B6ln%2C_Rheinufer%2C_Hochwasser.jpg/573px-Bundesarchiv_B_422_Bild-0086%2C_K%C3%B6ln%2C_Rheinufer%2C_Hochwasser.jpg",
      altText: "Kölner Altstadt bei Hochwasser" 
    }
   ];
   createGallery(document.getElementById("meineBilder"), galerieDaten, 2000);
   
   function createGallery(container,...