Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von niclas123456789

    niclas123456789

    24.03.2013 - 18:31

    Super Tutorial weiter so

  • Portrait von Boxerlady

    Boxerlady

    27.01.2012 - 10:30

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

  • Alternative Portrait von Bending

    Bending

    22.07.2011 - 01:05

    Vielen Dank! War sehr hilfreich!



    geändert von Bending am 22.07.2011 - 01:06
  • Portrait von mindraper

    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".

  • Alternative Portrait von Ai_relav

    Ai_relav

    25.05.2011 - 12:25

    Danke hat mir sehr geholfen :D

  • Alternative Portrait von pcjette

    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.

  • Alternative Portrait von vitus37

    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

  • Alternative Portrait von artesmaracay

    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!

  • Alternative Portrait von DerRio

    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.

  • Alternative Portrait von websmurf

    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???

  • Alternative Portrait von micke83

    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.

  • Alternative Portrait von Spearboy

    Spearboy

    17.11.2010 - 07:46

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

  • Alternative Portrait von germinal

    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

    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

    Ranger1281

    16.11.2010 - 01:01

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

  • Portrait von EL1985

    EL1985

    15.11.2010 - 17:41

    ein super tutorial :-) dankeschön

  • Portrait von hubspe

    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.

  • Alternative Portrait von Nerevar25

    Nerevar25

    15.11.2010 - 14:30

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

    • Alternative Portrait von vitus37

      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.

  • Alternative Portrait von Gack81

    Gack81

    14.11.2010 - 18:10

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

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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:

Bilder


 

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
vBulletin 0.045 • ZF-App 0.59 • Total 0.635