So erstellen Sie eine einfache Bildergalerie mit HTML, CSS und JavaScript

Das Erstellen einer einfachen Bildergalerie mit HTML, CSS und JavaScript ist eine großartige Möglichkeit, die Grundlagen der Webentwicklung zu erlernen. In der Bildergalerie können Sie durch Bilder blättern, indem Sie Miniaturansichten auswählen, um das Bild auf der Webseite zu vergrößern.

Um die Galerie zu erstellen, können Sie HTML verwenden, um den Webseiteninhalt hinzuzufügen, und CSS, um das Styling hinzuzufügen. Sie können JavaScript verwenden, um die Galerie interaktiv zu gestalten, wenn der Benutzer auf eine der Miniaturansichten klickt.

So erstellen Sie die Benutzeroberfläche für die Bildergalerie

Fügen Sie die Benutzeroberfläche für die Bildergalerie mit HTML und CSS hinzu. Dazu gehört das Hinzufügen eines großen Bildes in der Mitte der Webseite, das sich je nach ausgewähltem Miniaturbild ändert. Sie können auch das vollständige Beispiel anzeigen

1. Erstellen Sie eine neue Datei namens "index.html".
2. Fügen Sie in dieser Datei die grundlegende HTML-Codestruktur hinzu:

   html>
   <htmllang="en-US">
   <Kopf>
   <Titel>BildergalerieTitel>
   Kopf>
   <Körper>
   <divKlasse="Einführung">
   <h2>Bildergalerieh2>
   <P>Wählen Sie unten eine Miniaturansicht aus, um das Bild anzuzeigenP>
   div>
   Körper>
   html>

3. Erstellen Sie einen Unterordner mit dem Namen "images". Füllen Sie es mit mehreren Bildern und benennen Sie sie von "image1.jpg" bis "image10.jpg".
4. Fügen Sie in Ihrer HTML-Datei ein div für die Bildergalerie hinzu:

   <divAusweis="Bildergalerie">
   div>

5. Fügen Sie innerhalb des Bildgalerie-Div ein Bild-Tag hinzu, um das vergrößerte ausgewählte Bild anzuzeigen. Zeigen Sie standardmäßig das erste Bild im Ordner "images" an:

   <BildAusweis="aktuelles Bild"Quelle="Bilder/Bild1.jpg"alt="Bild 1">

6. Fügen Sie im selben Ordner wie Ihre HTML-Datei eine neue Datei namens „styles.css“ mit dem folgenden CSS hinzu. Fühlen Sie sich frei, das hinzuzufügende CSS zu ändern neumorphe Designkomponenten oder nehmen Sie andere Designanpassungen vor diese CSS-Tipps und Tricks.

7. .Einführung { 
   Textausrichtung: Center; 
   Schriftfamilie: Arial;
   }
   h2 { 
   Schriftgröße: 36px;
   }
   P { 
   Schriftgröße: 14Punkt;
   }
   #Bildergalerie { 
   Breite: 600px; 
   Rand: 0 Auto;
   }
   #aktuelles Bild { 
   Breite: 100%;
   } 

8. Fügen Sie im Head-Tag Ihrer HTML-Datei einen Link zu Ihrer CSS-Datei hinzu:

   <Verknüpfungrel="Stilvorlage"Typ="text/css"href="stile.css">

So fügen Sie Miniaturansichten für die anderen Bilder in der Galerie hinzu

Derzeit zeigt die Bildergalerie nur das erste Bild an. Fügen Sie unter dem ausgewählten Bild eine Liste mit Miniaturansichten hinzu. Diese Miniaturansichten zeigen eine Vorschau aller Bilder im Ordner „images“ an.

1. Fügen Sie innerhalb des Bildgalerie-Div in der HTML-Datei ein weiteres Div hinzu, um Miniaturansichten für die anderen Bilder anzuzeigen:

   <divAusweis="Bild-Daumen">div>

2. Fügen Sie in der CSS-Datei ein Styling für die Liste der Miniaturansichten hinzu:

   #image-thumbs { 
   Anzeige: biegen; 
   rechtfertigen-Inhalt: Center; 
   Rand-oben: 20px;
   }

3. Fügen Sie im selben Ordner wie Ihre HTML- und CSS-Dateien eine neue Datei mit dem Namen "script.js" hinzu.
4. Fügen Sie am Ende des HTML-Body-Tags einen Link zu Ihrer JavaScript-Datei hinzu:

   <Körper>
    Ihr Code hier 
   <SkriptQuelle="script.js">Skript>
   Körper>

5. Rufen Sie in der JavaScript-Datei das HTML-Element des div ab, in dem die Liste der Miniaturansichten gespeichert wird:

   Var imageThumbs = dokumentieren.getElementById("Bild-Daumen");

6. Fügen Sie eine for-Schleife hinzu, um jedes der 10 Bilder in der Galerie zu durchlaufen:

   für (Var ich = 1; ich <= 10; i++) {
   }

7. Erstellen Sie innerhalb der Schleife für jedes Bild ein neues img-Element:

   Var Daumen = dokumentieren.createElement("img");

8. Fügen Sie Werte für die Attribute „src“ und „alt“ hinzu. In diesem Fall ist das Attribut „src“ der Dateipfad zum Bild am selben Index im Ordner „images“:

   thumb.src = "Bilder/Bild" + Ich + ".jpg";
   thumb.alt = "Bild " + ich;

9. Fügen Sie in Ihrer CSS-Datei eine neue Klasse hinzu, um das Miniaturbild des Bildes zu gestalten. Sie können auch andere Hover- oder Übergangs-CSS-Stile für die Miniaturansichten hinzufügen Gestalten Sie Ihre Website responsiv und interaktiv.

   .Daumen { 
   Breite: 80px; 
   Höhe: 80px; 
   objekttauglich: Abdeckung; 
   Rand rechts: 10px; 
   Mauszeiger: Zeiger;
   }

10. Fügen Sie in der JavaScript-Datei die obige Klasse zum neuen Thumbnail hinzu:

    thumb.classList.add("Daumen");

11. Fügen Sie die neue Miniaturansicht dem HTML-Element hinzu, das die Liste der Miniaturansichten enthält:

    imageThumbs.appendChild (Daumen);

So ändern Sie das Bild, wenn der Benutzer auf ein Miniaturbild klickt

Wenn der Benutzer auf eine der Miniaturansichten klickt, ändert sich das vergrößerte Bild in der Mitte der Seite in das ausgewählte Bild. Sie können diese Funktionalität innerhalb der JavaScript-Datei hinzufügen.

1. Holen Sie sich oben in der JavaScript-Datei das HTML-Element des aktuell ausgewählten Bildes:

   Var aktuellesBild = dokumentieren.getElementById("aktuelles Bild");

2. Innerhalb der for-Schleife, Fügen Sie einen Ereignishandler hinzu das ausgelöst wird, wenn der Benutzer eine der Miniaturansichten unten auf der Seite auswählt:

   thumb.addEventListener(
   "klicken", Funktion() {
    }
   );

3. Ändern Sie im Ereignishandler das Attribut "src" des aktuellen Bildes in das neu ausgewählte Bild. Sie können auch das "alt"-Attribut aktualisieren:

   aktuellesBild.src = Das.src;
   aktuellesBild.alt = Das.alt;

4. Klicken Sie auf die Datei „index.html“, um sie in einem Webbrowser zu öffnen.
5. Wählen Sie eine der Miniaturansichten aus, um das Bild anzuzeigen.

Erweitern Sie Ihr JavaScript-Wissen weiter

Unabhängig von Ihrer Erfahrung ist es wichtig, Projekte weiterzuentwickeln, um Ihr Wissen zu erweitern. Erkunden Sie weitere Projekte wie das Erstellen eines Schachspiels, eines Taschenrechners oder einer Aufgabenliste.