Photogalerie mit PHP und JavaScript

[an error occurred while processing this directive] 2 php galerie php bildergalerie

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.

Letzte Posts zum Thema aus unserem Forum

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

Zeilenumbruch in der Bildergalerie-Beschriftung

Hallo, die Bildergalerie mit php und js ist super, jedoch möchte ich gern zu meinen Bildern verschiedene Bemerkungen machen und zwar untereinander, ... » mehr

von Sylma am Mittwoch, 26. Januar 2011 01:13 in PHP - bisher 1 Antwort
Letzter Beitrag: Freitag, 28. Januar 2011 10:16 von alm

Hallo, ich nehme an, dass \n im Beschreibungstext nicht funktioniert aber versuchen kann man es. Ansonsten: Schon mal mit einer UTF-Sequenz ... » mehr

Vollbild mit dem Galerie-script

Ich setze das Galerie-script bereits seit einiger Zeit erfolgreich ein, jetzt jedoch möchte ich eine Änderung machen. Ist es möglich, dass das ... » mehr

von elefantino am Donnerstag, 16. April 2009 06:20 in JavaScript - bisher 9 Antworten
Letzter Beitrag: Montag, 29. Juni 2009 20:37 von justsomeone

Super, vielen Dank. Ich stand irgendwie auf dem Schlauch. Funktioniert einwandfrei. Echt klasse. Danke für deine schnelle und freundliche Hilfe. Und ... » mehr

Problem mit Bildunterschriften in Bildgalerie...

Ich setze die Bildergalerie auf meiner Homepage ein und bin mit ihr auch sehr zufrieden. Sie war das beste was ich dieser Art im Internet gesehen ... » mehr

von Guenter am Samstag, 1. November 2008 14:05 in JavaScript - bisher 4 Antworten
Letzter Beitrag: Sonntag, 2. November 2008 15:02 von Guenter

Ihr könnt den Thread schließen. Vielen Dank für Eure Hilfe. Die Lösung war noch simpler. </font></p> Diese beiden Tags haben an ... » mehr

Javascript Galerie // Startbild festlegen

Hi, ich möchte gerne festlegen, welches Großbild bereits zu beginn angezeugt wird bzw. festlegen, dass das entsprechende Großbild zum ersten ... » mehr

von babba am Montag, 9. Juni 2008 16:27 in JavaScript - bisher 5 Antworten
Letzter Beitrag: Mittwoch, 11. Juni 2008 11:15 von alm

Hallo, die Galerie soll die Logik der Darstellung möglichst konsequent vom jeweiligen Layout trennen, so dass der Anwender diese nach Möglichkeit ... » mehr

¬ Menu