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 den vollständigen Beispielquellcode auch auf GitHub anzeigen.
- Erstellen Sie eine neue Datei namens „index.html“.
- Fügen Sie in dieser Datei die grundlegende HTML-Codestruktur hinzu:
<!doctype html>
<html lang="en-US">
<head>
<title>Image Gallery</title>
</head>
<body>
<div class="intro">
<h2>Image Gallery</h2>
<p>Select a thumbnail below to view the image</p>
</div>
</body>
</html> - 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“.
- Fügen Sie in Ihrer HTML-Datei ein div für die Bildergalerie hinzu:
<div id="image-gallery">
</div> - 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:
<img id="current-image" src="images/image1.jpg" alt="Image 1"> - 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 CSS zu ändern, um neumorphe Designkomponenten hinzuzufügen, oder nehmen Sie andere Designänderungen vor, indem Sie diese CSS-Tipps und Tricks verwenden.
-
.intro {
text-align: center;
font-family: Arial;
}h2 {
font-size: 36px;
}p {
font-size: 14pt;
}#image-gallery {
width: 600px;
margin: 0 auto;
}#current-image {
width: 100%;
} - Fügen Sie im Head-Tag Ihrer HTML-Datei einen Link zu Ihrer CSS-Datei hinzu:
<link rel="stylesheet" type="text/css" href="styles.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.
- Fügen Sie innerhalb des Bildgalerie-Div in der HTML-Datei ein weiteres Div hinzu, um Miniaturansichten für die anderen Bilder anzuzeigen:
<div id="image-thumbs"></div> - Fügen Sie in der CSS-Datei ein Styling für die Liste der Miniaturansichten hinzu:
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
} - Fügen Sie im selben Ordner wie Ihre HTML- und CSS-Dateien eine neue Datei namens „script.js“ hinzu.
- Fügen Sie am Ende des HTML-Body-Tags einen Link zu Ihrer JavaScript-Datei hinzu:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - Rufen Sie in der JavaScript-Datei das HTML-Element des div ab, in dem die Liste der Miniaturansichten gespeichert wird:
var imageThumbs = document.getElementById("image-thumbs"); - Fügen Sie eine for-Schleife hinzu, um jedes der 10 Bilder in der Galerie zu durchlaufen:
for (var i = 1; i <= 10; i++) {
} - Erstellen Sie innerhalb der Schleife für jedes Bild ein neues img-Element:
var thumb = document.createElement("img"); - 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 = "images/image" + i + ".jpg";
thumb.alt = "Image " + i; - 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, um Ihre Website reaktionsschnell und interaktiv zu gestalten.
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
} - Fügen Sie in der JavaScript-Datei die obige Klasse zum neuen Thumbnail hinzu:
thumb.classList.add("thumb"); - Fügen Sie die neue Miniaturansicht dem HTML-Element hinzu, das die Liste der Miniaturansichten enthält:
imageThumbs.appendChild(thumb);
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.
- Holen Sie sich oben in der JavaScript-Datei das HTML-Element des aktuell ausgewählten Bildes:
var currentImage = document.getElementById("current-image"); - Fügen Sie innerhalb der for-Schleife einen Ereignishandler hinzu, der ausgelöst wird, wenn der Benutzer eine der Miniaturansichten unten auf der Seite auswählt:
thumb.addEventListener(
"click", function() {
}
); - Ändern Sie im Ereignishandler das Attribut „src“ des aktuellen Bildes in das neu ausgewählte Bild. Sie können auch das „alt“-Attribut aktualisieren:
currentImage.src = this.src;
currentImage.alt = this.alt; - Klicken Sie auf die Datei „index.html“, um sie in einem Webbrowser zu öffnen.
- 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.
Schreibe einen Kommentar