Anzeige
Tutorialbeschreibung

CSS-Bildergalerie mit Vorschaubildern

CSS-Bildergalerie mit Vorschaubildern

Das folgende Tutorial beschreibt das schrittweise Erstellen einer Bildergalerie in den Sprachen HTML und CSS. Sie basiert auf dem Anzeigen verschiedener Bilder mit dem CSS-hover-Effekt.


CSS-Bildergalerie mit Vorschaubildern

Einleitung:

Das folgende Tutorial beschreibt das schrittweise Erstellen einer Bildergalerie in den Sprachen HTML und CSS. Sie basiert auf dem Anzeigen verschiedener Bilder mit dem CSS-hover-Effekt.
Viel Spaß beim Lesen und ggf. Verwenden. :)

Um vorab zu sehen, worum es hier eigentlich geht, hier eine Vorschau:

Vorschau der GalerieBilder



 

Schritt 1:

Ordnerstruktur und Dateien

Um die Übersichtlichkeit der Bildergalerie hinter den Kulissen zu erhalten, legen wir im Hauptverzeichnis unserer Website einen Ordner galerie und darin einen Unterordner bilder an.

In den Ordner galerie/bilder speichern wir die Galeriebilder ab.

Im Ordner galerie erstellen wir eine CSS-Datei mit dem Namen style.css.

Schematische Verzeichnisstruktur:

// Websitedateien
// Ordner: galerie
----// Datei: style.css
----// Ordner: bilder
--------// Datei: bild1.jpg
--------// Datei: bild2.png
--------// Datei: bild3.jpg
--------// Datei: bild4.jpg


Hinweis: Die Bilder sollten ggf. komprimiert werden.

Schritt 2:

HTML-Datei

(Hinweis: In den Beispielen wird HTML 5 genutzt.)

Wir öffnen die Website-Datei (i.d.R. HTML-Datei), in der die Bildergalerie angezeigt werden soll, und suchen uns den entsprechenden Codeabschnitt zum Einfügen aus.

<!DOCTYPE html>
<html>
 <head>
 <title>CSS-Bildergalerie mit Thumbnails</title>
 </head>
 
 <body>
 <h1>CSS-Bildergalerie mit Thumbnails</h1>
 <p>Dies ist ein Tutorial zum Erstellen einer Bildergalerie in HTML und CSS mit Vorschaubildern.</p>
 
 <!-- Hierher soll die Bildergalerie -->
 
 <p>Footer</p>
 </body>
</html>


Wir grenzen die gesamte Galerie mit einem <div> ein und geben diesem die Klasse galerie.

<div class="galerie">
 ...
</div>



Für jedes der Galeriebilder legen wir nun noch ein weiteres <div> an, dem wir die Klasse bild zuweisen.

<div class="galerie">
 <div class="bild">
 ...
 </div>
 <div class="bild">
 ...
 </div>
 ...
</div>




In diese <div>s kommen nun für jedes Galeriebild zwei <img>-Tags; eines für die Vorschau und eines für die Hauptansicht. Entsprechend werden die Klassen vorschau und ansicht vergeben. Dem Bild mit der Klasse ansicht geben wir zusätzlich eine eindeutige ID, am besten passend zum Bild.

Zusätzlich fügen wir dem HTML-Dokument im <head>-Tag folgenden Verweis auf ein Stylesheet hinzu:

<link rel="stylesheet" type="text/css" href="galerie/style.css" />


Das HTML-Dokument sollte nun etwa so aussehen:
<!DOCTYPE html>
<html>
 <head>
 <title>CSS-Bildergalerie mit Thumbnails</title>
 <link rel="stylesheet" type="text/css" href="galerie/style.css" />
 </head>
 
 <body>
 <h1>CSS-Bildergalerie mit Thumbnails</h1>
 <p>Dies ist ein Tutorial zum Erstellen einer Bildergalerie in HTML und CSS mit Vorschaubildern.</p>
 
 <!-- Hier beginnt der Galerie-Code -->
 <div class="galerie">
 <div class="bild">
 <img src="galerie/bilder/bild1.jpg" alt="Peace-Zeichen" class="vorschau" title="Peace-Zeichen" />
 <img src="galerie/bilder/bild1.jpg" alt="Peace-Zeichen" class="ansicht" title="Peace-Zeichen" id="peace" />
 </div>
 <div class="bild">
 <img src="galerie/bilder/bild2.png" alt="Flugzeug Düsenjäger" class="vorschau" title="Flugzeug Düsenjäger" />
 <img src="galerie/bilder/bild2.png" alt="Flugzeug Düsenjäger" class="ansicht" title="Flugzeug Düsenjäger" id="flugzeug" />
 </div>
 <div class="bild">
 <img src="galerie/bilder/bild3.jpg" alt="Schwarz-Weiß Peace-Zeichen" class="vorschau" title="Schwarz-Weiß Peace-Zeichen" />
 <img src="galerie/bilder/bild3.jpg" alt="Schwarz-Weiß Peace-Zeichen" class="ansicht" title="Schwarz-Weiß Peace-Zeichen" id="schwarzpeace" />
 </div>
 <div class="bild">
 <img src="galerie/bilder/bild4.jpg" alt="Flugzeug Infotafel" class="vorschau" title="Flugzeug Infotafel" />
 <img src="galerie/bilder/bild4.jpg" alt="Flugzeug Infotafel" class="ansicht" title="Flugzeug Infotafel" id="flugzeugtafel" />
 </div>
 
 <!-- Optional: -->
 <p style="margin: 10px;">Bitte ein Bild auswählen.</p>
 
 </div>
 <!-- Hier endet der Galerie-Code -->
 
 <p>Footer/Copyright etc.</p>
 </body>
</html>



 

Schritt 3:

CSS-Code

Kommen wir nun zum Stylesheet der Bildergalerie. Im Folgenden werden nur die Grundfunktionalitäten gezeigt und erläutert. Das Design könnt ihr übernehmen oder nach eigenen Wünschen abändern und verschönern.

Zuerst geben wir unserem <div> galerie eine feste Höhe und eine feste Breite. Dazu eine Hintergrundfarbe und einen Rahmen.

div.galerie{
 width: 400px; /* Breite der Galerie */
 height: 440px; /* Hoehe der Galerie */
 overflow: hidden; /* Überschneiden von Bildern abschalten */
 /* weitere Angaben: */
 background: #999999; /* Hintergrund */
 border: 2px #555555 solid; /* Rahmen */
}


Als Nächstes kümmern wir uns um die Vorschaubilder, die sog. Thumbnails. Nun wird es etwas komplizierter, denn Mathe ist gefragt. ;)

Wir teilen die Breite des <div> galerie durch die Anzahl der Galeriebilder. Im Fall dieses Beispiels entspricht dies also 400px geteilt durch 4, macht 100px.

Zusätzlich ziehen wir 20px ab, da wir an den Seiten je 10px Abstand haben wollen. Letzten Endes also 80px für Höhe und Breite des Thumbnails.

Daraus ergibt sich etwa dieser Code:

div.galerie div.bild{
 width: 80px; /* Breite des Vorschaubildes */
 height: 80px; /* Hoehe des Vorschaubildes */
 padding: 10px; /* Abstand zwischen Galerierand und Vorschaubild */
 float: left; /* Vorschaubilder nebeneinander platzieren */
 clear: right; /* " */
}


Dem Vorschaubild selbst geben wir ebenfalls eine Breite von 80px. (Die Höhe wird i.d.R. vom Browser selbst generiert, so wird das Bild nicht verzerrt).

div.galerie img.vorschau{
 width: 80px; /* gleich wie div.bild->width */
}


Soweit werden die Thumbnails richtig angezeigt.

Jetzt sollen die Ansichtsbilder verdeckt werden, bis sie durch ein Maus-hover über das jeweilige Thumbnail angezeigt werden. Dazu setzen wir diese für den späteren Einsatz ganz in den Vordergrund, lassen sie absolut positionieren und geben ihnen eine Breite von 380px (entspricht der Breite der Galerie minus zwei mal dem Abstand zum Galerierand).

div.galerie img.ansicht{
 display: none; /* Ansichtsbilder verdecken */
 position: absolute; /* absolute Positionierung */
 z-index: 100; /* in den Vordergrund setzen */
 width: 380px; /* Breite des Ansichtsbild */
}


Als Nächstes der Code, der die Bilder beim hover anzeigen lässt:

div.galerie div.bild:hover img.ansicht{
 display: block;
}


Soweit sieht man die Thumbnails, die beim Drüberfahren mit der Maus die Ansichtsbilder anzeigen; jedoch sind diese noch verschoben.

Jetzt kommen die IDs zum Einsatz, die wir den Ansichts-<img>-Tags zugewiesen haben. Wir müssen die Ansichtsbilder mit dem margin-Attribut in die richtige Position versetzen. Das ist der einzige Nachteil an dieser Galerie, da man jedes Bild einzeln positionieren muss.

Im Falle dieses Beispiels sieht der Code so aus:

/* einzelne Bilder positionieren: */
#peace{
 margin-top: 15px; /* Abstand von Ansichtsbild nach oben */
}
#flugzeug{
 margin-left: -100px; /* Abstand von Ansichtsbild nach links */
 margin-top: 45px; /* Abstand von Ansichtsbild nach oben */
}
#schwarzpeace{
 margin-left: -200px; /* Abstand von Ansichtsbild nach links */
 margin-top: 40px; /* Abstand von Ansichtsbild nach oben */
}
#flugzeugtafel{
 margin-left: -300px; /* Abstand von Ansichtsbild nach links */
 margin-top: 30px; /* Abstand von Ansichtsbild nach oben */
}


Nun nochmal der gesamte CSS-Code zum Kopieren:

div.galerie{
 width: 400px; /* Breite der Galerie */
 height: 440px; /* Hoehe der Galerie */
 overflow: hidden;
 /* weitere Angaben: */
 background: #999999;
 border: 2px #555555 solid;
}
div.galerie div.bild{
 width: 80px; /* Breite des Vorschaubildes */
 height: 80px; /* Hoehe des Vorschaubildes */
 padding: 10px; /* Abstand zwischen Galerierand und Vorschaubild */
 float: left; /* Vorschaubilder nebeneinander platzieren */
 clear: right;
}
div.galerie img.vorschau{
 width: 80px; /* gleich wie div.bild->width */
}
div.galerie img.ansicht{
 display: none; /* Ansichtsbilder verdecken */
 position: absolute; /* absolute Positionierung */
 z-index: 100; /* in den Vordergrund setzen */
 width: 380px; /* Breite des Ansichtsbild */
}
div.galerie div.bild:hover img.ansicht{
 display: block;
}

/* einzelne Bilder positionieren: */
#peace{
 margin-top: 15px; /* Abstand von Ansichtsbild nach oben */
}
#flugzeug{
 margin-left: -100px; /* Abstand von Ansichtsbild nach links */
 margin-top: 45px; /* Abstand von Ansichtsbild nach oben */
}
#schwarzpeace{
 margin-left: -200px; /* Abstand von Ansichtsbild nach links */
 margin-top: 40px; /* Abstand von Ansichtsbild nach oben */
}
#flugzeugtafel{
 margin-left: -300px; /* Abstand von Ansichtsbild nach links */
 margin-top: 30px; /* Abstand von Ansichtsbild nach oben */
}

Das Ganze muss noch in galerie/style.css abgespeichert werden und sollte dann funktionieren.


Viel Spaß noch mit der Galerie.

P.S.
Ich plane, diese Bildergalerie mit PHP zu automatisieren, sodass die Bilder nur in einen Ordner kopiert werden müssen und der Rest selbst generiert wird.

Gruß
Vitus

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von niclas123456789
Portrait von Boxerlady
  • 27.01.2012 - 10:30

Dankeschön! Gut erklärt und sehr hilfreich für mich :-)

Portrait von Bending
  • 22.07.2011 - 01:05

Vielen Dank! War sehr hilfreich!

Portrait von mindraper
  • 26.06.2011 - 03:42

An und für sich ein schönes Tut, nur frage ich mich gerade, wo (abgesehen vom DOCTYPE) hier HTML 5 genutzt wird. Das ist nichts, wofür man diesen DOCTYPE nutzen und versch. Browser evtl. in den Quircks zwingen müsste.

Insofern von mir nur ein "befriedigend".

Portrait von Ai_relav
  • 25.05.2011 - 12:25

Danke hat mir sehr geholfen :D

Portrait von pcjette
  • 15.03.2011 - 13:03

Ist meiner Meinung nach nur für kleine Bildergalerien ohne Pflege realisierbar. Die Idee ist sehr gut und gut beschrieben und erklärt ist es auch.

Portrait von vitus37
  • 24.11.2010 - 19:37

Guten Abend an alle,

ich bin für eure positiven als auch negativen Antworten sehr dankbar. Ich habe mir eure Raschläge zu Herzen genommen und arbeite derzeit an einer Version der Galerie in Verbindung mit PHP.

Ich denke ihr werdet positiv überracht, möchte an dieser Stelle aber auch noch nicht mehr verraten. Ich halte euch auf dem Laufenden!

LG Vitus

Portrait von artesmaracay
  • 24.11.2010 - 19:33

Vielen Dank! Gut erklaert. Inwieweit es alternative Loesungen zu mengenmaessig ueberschaubaren Galerien gibt, bin ich noch nicht firm genug, um das zu beurteilen. Hilft aber schonmal sehr!

Portrait von DerRio
  • 21.11.2010 - 16:11

Nette Anregung, da ich gerade an einer Bildergalerie für eine HP bastle. Aber für jedes Bild eine eigene ID ist mir nicht flexibel genug. Ich möchte schnell mal Bilder hinzufügen oder löschen können, ohne groß am Code etwas ändern zu müssen.

Portrait von websmurf
  • 19.11.2010 - 10:59

Für jedes Bild eine eigene CSS Klasse, das ist für Galerien mir mehr Bildern eine absolute Fummelei und absolut nicht zeitgemäß. Durch die fehlende Strukturierung der Bilder, z.B. mit Listen, ist das Tutorial auch für Anfänger nicht geeignet. Um HTML und CSS zu lernen sollte man von Anfang an strukturiert vorgehen. Und wo ist HTML5 eingesetzt???

Portrait von micke83
  • 19.11.2010 - 10:20

Die Bilder würden sich anbieten als Listenelemente zu setzen, ist einfacher zu handhaben. Für das Auge ansprechender könnte es auch gemacht werden. Naja für wirkliche Anfänger geeignet, aber sowas würde ich nie und nimmer in einer Webseite einbauen. Da gibt es viel bessere Lösungen und Techniken.

Portrait von Spearboy
  • 17.11.2010 - 07:46

Vielen Dank für dieses Tut, für mich als Einsteiger ideal.

Portrait von germinal
  • 16.11.2010 - 20:08

Im Moment suche ich nach einer ansprechenden Galerie für meinen Auftritt, bei jQuery habe ich auch schon ansprechende Sachen gefunden. Allerdings finde ich dieses Beispiel, beschränkt auf HTML und CSS, sehr ansprechend und aufschlußreich. Denn ich lerne ja noch.

Also vielen Dank an dieser Stelle!

j.

Portrait von RaySpoint
  • 16.11.2010 - 10:17

Ja,
Ich habe jetzt ehrlich gesagt auch etwas mehr erwartet, aber immer noch ein nettes Grundlagentutorial.
Danke für deine Mühe!

Portrait von Ranger1281
  • 16.11.2010 - 01:01

echt Klasse, Danke für dieses schöne Tut

Portrait von EL1985
  • 15.11.2010 - 17:41

ein super tutorial :-) dankeschön

Portrait von hubspe
  • 15.11.2010 - 17:32

Diese Galerie ist semantisch leider vollkommen unzureichend umgesetzt.

Eine Bildergalerie ist immer eine Liste von Bildern. Entweder eine ul oder eine Definitionsliste.

Portrait von Nerevar25
  • 15.11.2010 - 14:30

Toll erklärt, jedoch finde ich die auf diesem Wege entstehenden Ladezeiten nicht so vorteilhaft :/

Portrait von vitus37
  • 15.11.2010 - 16:59

Wie bereits gesagt:
Die Ladezeiten der Bilder werden nicht dadurch verlängert, dass zwei img-Tags auf's selbe Bild verweisen.

Das Bild wird nur ein einziges Mal in den Cache geladen.

Portrait von Gack81
  • 14.11.2010 - 18:10

Schön herrausgearbeitet ;)
geht dennoch auch so ehnlich mit xhtml/css ;)

x
×
×