Vom Thumbnail zum großen Bild
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.
<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, denn dort werden Bilder vorzugsweise in der vollen Breite eingesetzt. Bei Handys, die im Landscape-Modus gehalten werden, wäre die Höhe des Bildes großer als die Höhe des Screens. 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.
Hier ist z.B. ein weiteres Bild in einem a-Tag mit der CSS-Klasse with-overlay:
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}
}