Lösungsvorschlag für eine einfache Bildergalerie

Wer keine Spezialeffekte benötigt und nur mal die neusten Urlaubsbilder auf einer externen Seite veröffentlichen möchte, den könnte dieser Lösungsansatz interessieren. Die Idee und auch eine Umsetzung, eine Galerie ohne Javascript zu erstellen, ist bei mir schon vor einigen Jahren entstanden. Heute möchte ich diese simple, fast schon antiquarisch anmutende Galerie vorstellen. Der Grund ist, dass in mehreren Foren gelegentlich die Frage nach einer Galerie ohne Javascript auftaucht.

HTML Dokument erstellen

Um diese Galerie zu erstellen, werden gerademal zwei ungeordnete Listen benötigt. Die Navigation nimmt die internen Verweise auf und die zweite Liste die Anker, die angesprungen werden sollen, sowie die img-Elemente. Optional können hier auch Verweise eingefügt werden, die bspw. auf Bilder in voller Auflösung zeigen, oder um die Navigation mit der Tastatur zu erleichtern. Und schon ist das HTML-Dokument fertig.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
 <title>Galerie mit Anker</title>

</head>
<body>


 <ul id="navi">
  <li><a href="#b1">Bild 1 </a></li>
  <li><a href="#b2">Bild 2 </a></li>
  <li><a href="#b3">Bild 3 </a></li>
  <li><a href="#b4">Bild 4 </a></li>
  <li><a href="#b5">Bild 5 </a></li>
  <li><a href="#b6">Bild 6 </a></li>
  <li><a href="#b7">Bild 7 </a></li>
 </ul>

 <ul id="ausgabe">
  <li id="b1"><a href="#"><img src="deinbild.jpg" alt="Alternativtext" /></a></li>
  <li id="b2"><a href="#"><img src="deinbild.jpg" alt="Alternativtext" /></a></li>
  <li id="b3"><a href="#"><img src="deinbild.jpg" alt="Alternativtext" /></a></li>
  <li id="b4"><a href="#"><img src="deinbild.jpg" alt="Alternativtext" /></a></li> 
  <li id="b5"><a href="#"><img src="deinbild.jpg" alt="Alternativtext" /></a></li> 
  <li id="b6"><a href="#"><img src="deinbild.jpg" alt="Alternativtext" /></a></li> 
  <li id="b7"><a href="#"><img src="deinbild.jpg" alt="Alternativtext" /></a></li> 
 </ul>
 
</body>
</html>

Die richtige Bildgröße

Bevor es an den Style-Angaben geht, noch ein Wort zu den Bildgrößen. Die Bilder sollten vorher auf eine angemessene Größe skaliert werden. Die verwendeten Beispielbilder sind auf 570px x 428px skaliert, sodass sie noch in einer Auflösung vom 800 x 600 px gut betrachtet werden können. Die Bildgrößen können aber noch mit CSS-Angaben weiter manipuliert werden. Wer keine kleinen Auflösungen unterstützen möchte, kann seine Bilder entsprechend anpassen.

Style-Angaben für die Navigation

Weil es ja nur ein Beispiel sein soll, wird die Navigation nur geringfügig formatiert.

  #navi {
   margin:0;
   padding:0;
   width:110px;
   height:428px;  /* entspricht der Bildhöhe */
   float:left;    /* rechts von mir kommen die "schönen" Bilder hin */
   overflow:auto;  /* Wenn es mal mehr wird bitte Scrollbalken einschalten */
   background-color:#000;
 } 
 
 #navi li {
  margin:0;
  padding:0;
  list-style:none;
}


 #navi a {
  margin:0;
  padding:0;
  display:block;
  padding:3px;
  color:#fff;
 }
 
 
  
 

Style-Angaben für die Ausgabe

Mit den folgenden Style-Angaben sollen die Bilder neben der Navigation angezeigt werden.

 #ausgabe {
  margin:0;
  padding:0;
  margin-left:115px;
  width:570px;            /* Bildbreite */
  height:428px;           /* Bildhöhe */
  overflow:hidden;        /* Bitte nur ein Bild zeigen. Alle auf einmal wär langweilig */
  background-color:#ddd;
 } 
 
 #ausgabe li {
  margin:0;
  padding:0;
  list-style:none;
 }

#ausgabe li a {
  margin:0;
  padding:0;
  display:block;
}
  
#ausgabe li img {
 border:none;
 display:block;
 margin:0 auto;      /* Hochformat zentrieren */
} 


/* Angabe für den IE 6  */

* html #ausgabe {
 margin-left:110px;
}

Gestaltung

Da es ja nur ein Vorschlag ist, möchte ich euch das Design überlassen. Ich Denke mal, dass es genug Gestaltungsmöglichkeiten gibt. Nun bleibt zu hoffen, dass ich euch ein bisschen helfen konnte. Und so sieht es aus»

Hier» noch ein experimentelles Beispiel aus vergangenen Zeiten. Nur die Fotos von, Dirk Paeschke, sind neu.

Experimentelle CSS3 Bildergalerien zum weiterentwickeln

erstellt am 19.02.2011 Aktualisiert am 30.01.2012

nach oben