Bildergalerie mit PHP- Script

Hier möchte ich zeigen wie man eine Bildergalerie mit einem PHP-Script realisiert

Beispiel: Gran Canaria

Bei einen einheitlichen Format entsteht eine gleichmäßige Bildergalerie!

1. Ein Verzeichnis für die Bilder und ein weiteres für die Vorschaubilder anlegen.

2. Die Bilder bezeichnen.

3. Bilder mit zwei verschiedenen Auflösungen erstellen, eine für das Großformat und eine für die Vorschaubilder. Das kann man mit der Batchfunktion des Freeware Programms Irfanview erstellen.
Oder mit einem anderen Grafigprogramm z.B. Adobe Lightroom.

Noch schneller lassen sich Bilder für das Web optimieren mit dem Programm "ImageGalleryMaker" (Siehe Thema: Bannerwechsel und Slideshows)

4. Die Bilder in das jeweilige Verzeichnis kopieren.

5. Nun den Pfad zu den Verzeichnissen angleichen.

6. Entscheiden ob die Bildnummer und die Bildbezeichnung mit angezeigt werden sollen.

7. Nun kann man für die Bilder noch einen Rahmen zufügen und einen Abstand setzen, in dem man im Stylesheets für li (border: solid 1px; margin: 2px;) zufügt.

Der Vorteil ist, dass man immer Bilder hinzufügen oder löschen kann ohne am HTML-Code was verändern zu müssen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bildergalerie</title>
<style type="text/css">
.foto{ border:4px inset; text-decoration: none; /* Rahmenbreite */
            border-color: #B0B0B0; /* Rahmenfarbe */
              margin: 3px;
}
a{
  text-decoration: none; color: #C4C4C4; float: left; /* Textfarbe, evtl. Textgroese */
}
li{
  float: left; color: #A2A2A2; list-style-type: none; text-align: center;
}
</style>
</head>

<body style="background-color: #000000">   /* Hintergrundfarbe */
<h1 style="color: #FF9900">Bildergalerie</h1> /* Titel */
<?PHP
//verzeichnis lesen
$meinverzeichnis = getcwd()."/bilder/vorschaubilder/";
$verzeichnis = dir($meinverzeichnis);

while($einlesen=$verzeichnis->read()){
   if($einlesen != "." && $einlesen != ".."){
   $dateinamen[] = $einlesen;
   }
   }
$verzeichnis->close();
echo "<ul>";
//Ausgabe
sort($dateinamen);
while(list($bildnummer, $bildname) = each($dateinamen)) {
   if(substr($bildname, -4) == ".jpg")
   {
   $ohnejpg = preg_replace("/.jpg/","",$bildname);
   echo "<li><a href=\"bilder/".$bildname." \" target=\"_blank\">
   <img class='foto' alt=".$ohnejpg." src=\"bilder/vorschaubilder/".$bildname ."\">
   <br>$bildnummer. $ohnejpg</a></li>"; // hier entscheiden ob Bildnummer und Name erscheinen soll
   }
   }
echo "</ul>";
echo "<br>";
echo "<a href=\"http://www.mediengestalter-bildbearbeitung.de\">...Zurück</a>" ;
?>
</body>
</html>

Galerie mit Lightbox durch Einbindung des Javascript Brainbox

Brainbox

Zwischen Head-Bereich den Pfad für die CSS und des Java-Script einbinden. Bitte genau die Anleitung zur Pfadanbindung lesen!

Der Pfad zu den Grafik-Dateien muss in der CSS und im Java-Script angepasst werden.

Dann die Zeile verändern:

echo "<div id=\"hover\">";
echo "<ul>";
//Ausgabe
sort($dateinamen);
while(list($bildnummer, $bildname) = each($dateinamen)) {
   if(substr($bildname, -4) == ".jpg")
   {
   echo "<li><a href=\"bilder/".$bildname." \" rel=\"lightbox[Galeriename]\" target=\"_blank\">
   <img class='foto' alt=".$ohnejpg." src=\"bilder/vorschaubilder/".$bildname ."\">
   <br>$bildnummer. $ohnejpg</a></li>"; // hier entscheiden ob Bildnummer und Name erscheinen soll
   }
   }
echo "</ul>";
echo "</div>";

Sollten Probleme auftauchen, nehmen Sie bitte mit mir Kontakt auf.

Fragen beantwortet & Tipps zum Webdesign

Wichtig !!

Die Serversoftware Mowes Portable von der Firma CH Software hat die Geschäftstätigkeit zum 7. November 2012 eingestellt.
Ein gleichwertiges Programm ist: EasyPhp