Bildgalerie

Um mit dieser Bewertung zu beginnen, sollten Sie die ZIP-Datei herunterladen, auf Ihrem Computer entpacken und die Übung zunächst lokal durchführen.

Alternativ könnten Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden.

Ihnen wurden einige HTML-, CSS- und Bildressourcen sowie ein paar Zeilen JavaScript-Code zur Verfügung gestellt; Sie müssen das notwendige JavaScript schreiben, um daraus ein funktionierendes Programm zu machen. Der HTML-Körper sieht so aus:

<h1>Image gallery example</h1>

<div class="full-img">
  <img
    class="displayed-img"
    src="images/pic1.jpg"
    alt="Closeup of a blue human eye" />
  <div class="overlay"></div>
  <button class="dark">Darken</button>
</div>

<div class="thumb-bar"></div>

Das Beispiel sieht so aus:

Die interessantesten Teile der CSS-Datei des Beispiels:

• Sie positioniert die drei Elemente innerhalb der full-img <div> absolut — das <img>, in dem das Bild in voller Größe angezeigt wird, ein leeres <div>, das die gleiche Größe wie das <img> hat und direkt darübergelegt wird (dies wird verwendet, um einen Abdunklungseffekt auf das Bild durch eine halbtransparente Hintergrundfarbe anzuwenden), und ein <button>, das verwendet wird, um den Abdunklungseffekt zu steuern.
• Sie setzt die Breite aller Bilder innerhalb der thumb-bar <div> (sogenannte "Thumbnail"-Bilder) auf 20% und lässt sie nach links schweben, sodass sie nebeneinander auf einer Linie stehen.

Ihr JavaScript muss:

• Ein const-Array deklarieren, das die Dateinamen jedes Bildes auflistet, wie z. B. 'pic1.jpg'.
• Ein const-Objekt deklarieren, das den Alternativtext für jedes Bild auflistet.
• Durch das Array der Dateinamen schleifen und für jedes einen <img>-Element innerhalb der thumb-bar <div> einfügen, das dieses Bild zusammen mit seinem Alternativtext auf der Seite einbettet.
• Ein Klick-Ereignislistener zu jedem <img> innerhalb der thumb-bar <div> hinzufügen, sodass, wenn sie geklickt werden, das entsprechende Bild und der Alternativtext im displayed-img <img>-Element angezeigt werden.
• Einen Klick-Ereignislistener zum <button> hinzufügen, sodass, wenn es geklickt wird, ein Abdunklungseffekt auf das Bild in voller Größe angewendet wird. Wenn es erneut geklickt wird, wird der Abdunklungseffekt wieder entfernt.

Um Ihnen eine bessere Vorstellung zu geben, schauen Sie sich das fertige Beispiel an (keine Manipulation des Quellcodes!).

Die folgenden Abschnitte beschreiben, was Sie tun müssen.

Sie müssen ein Array erstellen, das die Dateinamen aller Bilder auflistet, die in die Galerie aufgenommen werden sollen. Das Array sollte als Konstante deklariert werden.

Wir haben Ihnen bereits Zeilen bereitgestellt, die eine Referenz auf die thumb-bar <div> in einer Konstanten namens thumbBar speichern, ein neues <img>-Element erstellen, dessen src- und alt-Attribute auf einen Platzhalterwert xxx setzen und dieses neue <img>-Element innerhalb thumbBar anhängen.

Sie müssen:

1. Den Abschnitt des Codes unter dem Kommentar "Looping through images" in eine Schleife einfügen, die durch alle Dateinamen im Array schleift.
2. In jeder Schleifeniteration die xxx-Platzhalterwerte durch einen String ersetzen, der dem Pfad zum Bild und den Alt-Attributen in jedem Fall entspricht. Setzen Sie den Wert der src- und alt-Attribute in jedem Fall auf diese Werte. Denken Sie daran, dass das Bild sich im Verzeichnis images befindet und sein Name pic1.jpg, pic2.jpg usw. ist.

In jeder Schleifeniteration müssen Sie dem aktuellen newImage einen Klick-Ereignislistener hinzufügen — dieser Listener sollte den Wert des src-Attributs des aktuellen Bildes finden. Setzen Sie den src-Attributwert des displayed-img <img> auf den im Parameter angegebenen src-Wert. Tun Sie dann dasselbe für das alt-Attribut.

Alternativ können Sie einen Ereignislistener für die Miniaturleiste hinzufügen.

Es bleibt nur noch unser Dunkel-/Heller-<button> — wir haben Ihnen bereits eine Zeile bereitgestellt, die eine Referenz auf die <button> in einer Konstanten namens btn speichert. Sie müssen einen Klick-Ereignislistener hinzufügen, der:

1. Den aktuellen Klassennamen auf das <button> überprüft — dies können Sie wiederum mit getAttribute() erreichen.
2. Wenn der Klassenname "dark" ist, die <button>-Klasse in "light" ändern (mit setAttribute()), ihren Textinhalt in "Aufhellen" ändern und die background-color des Overlay-<div> in "rgb(0 0 0 / 50%)" ändern.
3. Wenn der Klassenname nicht "dark" ist, die <button>-Klasse in "dark" ändern, ihren Textinhalt zurück in "Abdunkeln" ändern und die background-color des Overlay-<div> in "rgb(0 0 0 / 0%)" ändern.

Die folgenden Zeilen bieten eine Grundlage, um die in den Punkten 2 und 3 angegebenen Änderungen zu erreichen.

btn.setAttribute("class", xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;

• Sie müssen das HTML oder CSS in keiner Weise bearbeiten.

• Zurück
• Übersicht: JavaScript Grundbausteine