CSS - Bildergalerie

Willkommen, angehende Web-Designer! Heute tauchen wir ein in die aufregende Welt der CSS-Bildergalerien. Als dein freundlicher Nachbarschafts-EDV-Lehrer freue ich mich darauf, dich auf dieser Reise zu begleiten. Lassen wir diese langweiligen statischen Bilder in augenblicksfangende, interaktive Galerien verwandeln, die deine Websites zum Leben erwecken!

CSS - Image Gallery

Einfache Bildergalerie

fangen wir mit den Grundlagen an. Eine einfache Bildergalerie ist wie das Aufhängen von Fotos an deiner Wand – es geht um die Präsentation. So können wir eine mit CSS erstellen:

<div class="gallery">
<img src="image1.jpg" alt="Bild 1">
<img src="image2.jpg" alt="Bild 2">
<img src="image3.jpg" alt="Bild 3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

In diesem Beispiel verwenden wir Flexbox, um ein responsives Layout zu erstellen. Die Eigenschaft flex-wrap: wrap stellt sicher, dass unsere Bilder auf die nächste Zeile umgebrochen werden, wenn nicht genügend Platz vorhanden ist. justify-content: center zentriert unsere Bilder horizontal.

Bildergalerie mit Hover-Effekt

nun fügen wir ein wenig Interaktivität hinzu! Hover-Effekte können deine Galerie ansprechender machen. Es ist wie das Hinzufügen einer Geheimbotschaft, die nur erscheint, wenn man genauer hinschaut.

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="Bild 1">
<div class="overlay">
<div class="text">Hallo Welt</div>
</div>
</div>
<!-- Für andere Bilder wiederholen -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Dieses CSS erstellt eine Überlagerung, die erscheint, wenn man über ein Bild fährt. Die Eigenschaft transition gibt ihr einen sanften Einblendeffekt.

Responsiven Bildergalerie mit Media Query

In der heutigen multiplen Geräteklassenwelt ist Responsivität entscheidend. Lassen wir unsere Galerie an verschiedene Bildschirmgrößen anpassen:

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

Dieses CSS verwendet CSS Grid, um ein responsives Layout zu erstellen. Die Funktion minmax stellt sicher, dass unsere Bilder mindestens 200px breit sind, aber größer werden können, wenn Platz vorhanden ist. Die Media Queries passen das Layout für kleinere Bildschirme an.

Syntax

nehmen wir einen Moment, um die Syntax zu verstehen, die wir verwendet haben. CSS-Eigenschaften folgen dieser Struktur:

auswahl {
eigenschaft: wert;
}

Hier ist eine Tabelle häufig verwendeter CSS-Eigenschaften in Bildergalerien:

Eigenschaft	Beschreibung	Beispiel
display	Gibt das Anzeigeverhalten an	`display: flex;`
width	Setzt die Breite eines Elements	`width: 200px;`
height	Setzt die Höhe eines Elements	`height: 200px;`
margin	Setzt die Ränder eines Elements	`margin: 10px;`
object-fit	Gibt an, wie ein Bild skaliert werden soll	`object-fit: cover;`
position	Gibt die Positionierungsmethode an	`position: relative;`
opacity	Setzt den Deckungsgerahmen für ein Element	`opacity: 0;`
transition	Gibt den Übergangseffekt an	`transition: 0.5s ease;`

Horizontale Bildergalerie mit Scroll

Manchmal möchtest du eine Galerie horizontal scrollen lassen. Es ist wie ein Fotoreel, das man durchblättern kann:

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="Bild 1">
<img src="image2.jpg" alt="Bild 2">
<!-- Weitere Bilder hinzufügen -->
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

Dieses CSS erstellt eine horizontal scrollbare Galerie. Die Eigenschaft overflow-x: auto fügt eine horizontaleScrollbar hinzu, wenn erforderlich.

Vertikale Bildergalerie mit Scroll

Vertikale Scrollgalerien sind großartig, um eine große Anzahl von Bildern in einem kompakten Raum zu präsentieren:

<div class="gallery-vertical">
<img src="image1.jpg" alt="Bild 1">
<img src="image2.jpg" alt="Bild 2">
<!-- Weitere Bilder hinzufügen -->
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

Dieses CSS erstellt eine vertikale scrollbare Galerie. Die Eigenschaft overflow-y: scroll fügt eine vertikaleScrollbar hinzu.

CSS Grid Bildergalerie

CSS Grid ist ein leistungsstarkes Werkzeug zur Erstellung komplexer Layouts. Lassen wir es verwenden, um eine dynamische Bildergalerie zu erstellen:

<div class="grid-gallery">
<img src="image1.jpg" alt="Bild 1">
<img src="image2.jpg" alt="Bild 2">
<img src="image3.jpg" alt="Bild 3">
<img src="image4.jpg" alt="Bild 4">
<img src="image5.jpg" alt="Bild 5">
</div>

.grid-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

Dieses CSS erstellt ein Rasterlayout, bei dem einige Bilder mehrere Spalten oder Zeilen spannen, was ein dynamischeres Layout schafft.

CSS Tabbed Bildergalerie

Tabbed Galerien sind eine großartige Möglichkeit, verschiedene Satz von Bildern zu organisieren:

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">Natur</button>
<button class="tablinks" onclick="openTab(event, 'City')">Stadt</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="Natur 1">
<img src="nature2.jpg" alt="Natur 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="Stadt 1">
<img src="city2.jpg" alt="Stadt 2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

Für diese CSS ist etwas JavaScript erforderlich, um sie funktionell zu machen:

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

CSS Diashow

Lassen wir eine einfache Diashow erstellen:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

Du benötigst etwas JavaScript, um die Diashow zu steuern:

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Bild alle 2 Sekunden wechseln
}

CSS Diashow Galerie

Schließlich kombinieren wir unsere Diashow mit Miniaturansichten für eine interaktivere Erfahrung:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

Du musst das JavaScript anpassen, um Klicks auf Miniaturansichten zu behandeln:

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

Und das war's! Wir haben eine Vielzahl von CSS-Bildergalerie-Techniken behandelt. Denke daran, dass Übung den Meister macht. Probiere, diese Techniken zu kombinieren, um deine eigenen einzigartigen Galerien zu erstellen. Viel Spaß beim Coden!

Credits: Image by storyset