CSS Overlay mit Vanilla Javascript

CSS tabs ohne Javascript, mit input type radio als Checkbox Hack

Kleines Bild als Thumbnail oder Vorschaubild beim Klick als Overlay mit Spinner in voller Größe nachladen, anzeigen und beim nächsten Klick schließen.

Alle Bilder, die beim Klick vergrößert werden sollen, sitzen in einem einfachen a-Tag, das im href-Attribut die Adresse der großen Bildversion zeigt.

Das leere span class="spinner" ist der Spinner und bleibt verborgen, bis das Vorschaubild angeklickt wird.

Die großen Bilder in diesem Beispiel sind überdimensioniert, damit man den Spinner auch bei einer schnellen Internet-Verbindung zu Gesicht bekommt.

img1-s img2-s img3-s img4-s img5-s img6-s
<div class="flexpics">
   <a class="with-overlay" href="img1-l.jpg">
      <span class="spinner"></span>
      <img class="thumbnail" src="img1-s.jpg" width="480" height="320" alt="img1-s">
   </a>
   <a class="with-overlay" href="img2-l.jpg">
      <span class="spinner"></span>
      <img class="thumbnail" src="img2-s.jpg" width="400" height="267" alt="img2-s">
   </a>
</div>
…

Für kleine Monitore wäre der Overlay Overkill – darum beginnt die Anzeige des Overlays erst ab einer bestimmten Größe des Viewports, z.B. bei 600px.

CSS für Vorschaubilder, Spinner und große Bildversion
@media only screen and (min-width:600px) {
   .flexpics { 
      display: flex; 
      flex-wrap: wrap; 
      justify-content: space-between; 
      position: relative; 
    }

   a.with-overlay { 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      width: 30%; 
   }

   .spinner { 
      width: 50px; 
      height: 50px; 
      background: url("spinner.svg"); 
      position: absolute; 
      display: none;
   }
   .highRes { 
      position:absolute; 
      z-index:100; 
      left: 0;
   }
}

Um den Spinner in der Mitte des Vorschaubilds zu platzieren und später die hochauflösende Version des Bildes ebenfalls vertikal mittig anzuzeigen, bekommt a.with-overlay die Eigenschaft display: flex. justify-content: center und align-items: center zentrieren die Elemente unterhalb von a.with-overlay horizontal und vertikal.

highRes ist die Klasse für die hochauflösende Bildversion. Das große Bild wird mit position absolute und left: 0 positioniert, so dass es immer am linken Rand des umfassenden Blocks liegt.

Javascript für den Overlay

Bei Testen zwischendurch immer wieder den Cache leeren, damit der Spinner angezeigt wird. Ansonsten liegen die hochauflösenden Bilder bereits im Cache und das Umschalten auf die große Version passiert ohne Übergang.

var withOverlay = document.querySelectorAll(".with-overlay");
var len = withOverlay.length;

for (var i=0; i<len; i++) {
   withOverlay[i].addEventListener('click', function (e) {
      e.preventDefault();

      var thisImg = this;
      var spinner = this.querySelector(".spinner");
      spinner.setAttribute("style","display:block");
      highRes = new Image();
      highRes.classList.add('highRes');

      // zuerst den Listener für das Laden des Bildes
      highRes.addEventListener ('load', function () {
         thisImg.appendChild(highRes);
      });

      // entfernt das hochauflösende Bild bei einem Klick
      highRes.addEventListener ('click',function (e) {
          e.stopPropagation();
          e.preventDefault();
         this.parentNode.removeChild(e.target);
         spinner.setAttribute("style","display:none");
      });
   
      // src erst nach dem Aufsetzen des Listeners angeben
      highRes.src = this.getAttribute("href");
   });
}

var withOverlay = document.querySelectorAll(".with-overlay") sammelt alle Elemente mit der Klasse with-overlay, egal, ob sie unterhalb von flexpics liegen oder nicht. Die Vorschaubilder könnten ebensogut im Text eines Beitrags verteilt sein.

extra-01-s Hier ist z.B. ein weiteres Bild in einem a-Tag mit der CSS-Klasse with-overlay, dass klassisch mit float: left positioniert ist.

In der for-Schleife wird jedes withOverlay-Element auf die Klick-Aktion vorbereitet. Beim Klick verhindert e.preventDefault() die default-Aktion des a-Elements – die Navigation zur Adresse des href-Attributs.

Das Script muss im Fuß der Seite eingesetzt werden, am besten vor dem schließenden body-Tag.

Overlay Fullscreen

Damit das hochauflösende Bild fullscreen angezeigt wird, muss nicht das Javascript, sondern das CSS geändert werden.

Eine Möglichkeit

@media only screen and (min-width:600px) {
  body { position:relative} // zusätzlich
  .flexpics { 
     display: flex; flex-wrap: wrap; justify-content: space-between; 
     position: relative; 
  }
  .spinner { width: 80px; height: 80px; background: url("spinner.svg"); position: absolute; display: none}
  .highRes { 
     position:absolute; z-index:100; left: 0; 
     width: 100vw; 
  }
}

Overlay einblenden

Auch das weiche Einblenden des Overlays ist CSS-Sache.

.highRes { … opacity: 0; animation: fadeIn 1s forwards } // zusätzlich
@keyframes fadeIn {
    from { opacity: 0}
    to { opacity: 1}
}

Beispiel Download

OVERLAY