Photogalerie mit PHP und JavaScript

Mit der hier angebotenen Online-Galerie können Sie Ihre Urlaubsfotos im Internet veröffentlichen. Das Skript nutzt intern die JavaScript Galerie, von der Sie sich in der Java Script Galerie Demo ein Bild machen können. Die Galerie wird in Form einer Liste von Thumbnails dargestellt in der Sie Bild- bzw. Seitenweise blättern können. Auch hier können Sie die Anzahl der anzuzeigenden Thumbnails einstellen. Anders als bei der reinen JavaScript Version ist das Einpflegen der Bilder erheblich einfacher gestaltet. Die Bilddaten werden in Form einer CSV-Datei in die Galerie integriert. Eine Datenbank wird dabei nicht benötigt. Mit Hilfe einer Tabellenkalkulation können Sie eine Bilderliste erstellen, die vom Skript eingelesen und entsprechend verarbeitet wird. Alternativ können Sie die CSV-Datei mit den Bilddaten auch in einem normalen Editor erstellen und ändern.

Installation / Konfiguration

Zur Installation der Galerie sollten Sie die Dateien galerie.js, photo-gallery.php und das angepasste Stylesheet (.css), sowie das Verzeichnis nav samt Inhalt in ein separates Verzeichnis kopieren – beispielsweise nach /galerie. Dies hat den Vorteil, dass Sie diese Dateien nur einmal auf Ihrem Webserver speichern müssen, auch wenn Sie mehrere Galerien anbieten möchten. Die Photos und die Bilderliste der Galerie können Sie – der Übersichtlichkeit halber – jeweils getrennt voneinander in einem beliebigen Verzeichnis speichern.

Eine Bilderliste können Sie mit einem normalen Texteditor erstellen indem Sie – jeweils durch Semikolon getrennt – in jeder Zeile den Dateinamen der Thumbnail-Datei, den Dateinamen des Detailbildes einen Alt-Text und einen Beschreibungstext auflisten. In Ihrer Tabellenkalkulation können Sie ebenfalls in vier Spalten eine solche Liste erstellen und diese dann mit Speichern unter... im CSV-Format speichern. Bitte beachten Sie, dass innerhalb der Felder grundsätzlich keine Semikolons oder Tabulatoren erlaubt sind, da diese als Trenner interpretiert werden.

Nutzungsbeispiel

Das folgende Code-Beispiel zeigt, wie die Galerie genutzt wird. Dabei wird davon ausgegangen, dass die Dateien galerie.js und photo-gallery.php – wie in der Anleitung beschrieben – unter /galerie gespeichert sind. Liegen die Skripte in einem anderen Verzeichnis, so sind die Pfade (im Skript fett dargestellt) entsprechend anzupassen.

<html>
    <head>
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <script language="JavaScript1.5" src="/galerie/galerie.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="/galerie/galerie.css">
    </head>
<body>
<?php
    // include photo gallery script
    require_once ("/galerie/photo-gallery.php");
    // create gallery from given photolist
    createGallery ("./urlaub2005.csv");
?>
</body>
</html>

Die Funktion createGallery benötigt als Parameter den Dateinamen der Bilderliste, der in diesem Beispiel im selben Verzeichnis liegt wie die HTML-Datei, in der die Galerie dargestellt werden soll. Damit das Skript die Bilder in die Galerie einfügen kann, müssen die Bilder in einer Konfigurationsdatei (der Bilderliste) gelistet werden. Der folgende Abschnitt enthält eine solche Bilderliste (im Beispiel unter urlaub2005.csv gespeichert):

photos/bild1_t.jpg;photos/bild1.jpg;Die Ankunft;Ankunft am Flughafen
photos/bild2_t.jpg;photos/bild2.jpg;Das Hotel;Was für ein schöner Anblick
photos/bild3_t.jpg;photos/bild3.jpg;Das Zimmer;8-(
photos/bild4_t.jpg;photos/bild4.jpg;Das Meer;Zu kalt!
photos/bild5_t.jpg;photos/bild5.jpg;Pool;Alle Liegen mit Handtüchern belegt!
photos/bild6_t.jpg;photos/bild6.jpg;Sonnenuntergang;Sonne hinter den Baukränen!
photos/bild7_t.jpg;photos/bild7.jpg;
photos/bild8_t.jpg;photos/bild8.jpg;
photos/bild9_t.jpg;photos/bild9.jpg;Die Abreise;Vor dem Abflug

Die einzelnen Bilddaten werden duch Semikolons getrennt. Zuerst kommt der Name des Thumbnails und dann der Name des Detailbildes – in beiden Fällen können relative sowie absolute Pfade angegeben werden. Hier liegen die Bilder im Verzeichnis photos, welches sich im Verzeichnis der HTML-Datei befindet. Danach folgt ein Text, der im alt-Bereich des Image-Tags eingetragen werden soll und zuletzt eine Bildbeschreibung, mit der das Bild in der Detailanzeige beschriftet wird. In jeder Zeile werden die Beschreibungsdaten eines Galeriebildes eingegeben, wobei die letzten beiden Spalten – wie bei Bild 7 und 8 – leer bleiben können.

Download

Hier können Sie die PHP Bilder Galerie Downloaden ( 84K). Das Archiv enthält eine Beispielseite, die das Einbinden der Galerie demonstriert. Ein anpassbares Stylesheet regelt das Aussehen der Bildergalerie, während die Bilddaten in der Datei example.csv gespeichert sind. Einstellungen bzgl. der Anzahl der darzustellenden Thumbnails können in der Datei photo-gallery.html getätigt werden. Die Einstellungsmöglichkeiten in dieser Datei sind dokumentiert, so dass eine Anpassung leicht gelingen dürfte.

Wenn Ihnen das hier angebotene Script gefällt und Sie es auf Ihrer Homepage einsetzen möchten würde ich mich freuen, wenn Sie einen Link auf meine Seite setzen.