Fotogalerie [PHP5, CSS, Javascript]

Im Folgenden stelle ich eine Möglichkeit für eine Fotogalerie vor. Aktuell ist das ganze ausschließlich für Javascript programmiert, eine Erweiterung folgt später. Bitte beachtet, dass ich lediglich Beispielspfade und -benennungen verwendet habe, die ihr bei euren Dateien anpassen müßt. Vorschau des Ergebnisses


Vorbereitung

  • Stadtplan o. Landkarte (z.B. gemalt und eingescannt)
  • Fotos im Format 420x315 (andere Formate sind auch möglich)

Schritt 1 - XML-Datei

Die einzelnen Punkte der Karte machen wir mit Image Maps anklickbar. Um den Punkten die entsprechenden Bilder sowie die Koordinaten der Image Maps zuzuweisen habe ich hier eine XML-Datei verwendet. Dabei gibt es für jedes Bild 3 Werte: Name, Beschreibung und Koordinaten auf der Karte.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE bilder PUBLIC "bilder" "bilder.dtd">

<bilder>

<bild>

<name>1.jpg</name>
<beschreibung>Foto1</beschreibung> <koordinaten>314,118,334,138</koordinaten>

</bild>

</bilder>



Die Koordinaten findet ihr am einfachsten über ein Bildbearbeitungsprogramm heraus. Für jedes Bild wird ein solcher Knoten im XML-Dokument angelegt.


Schritt 2 - Anlegen der Galerie

Erzeugt eine PHP-Datei, meine ist sinnigerweise fotogalerie.php benannt. Bindet nun die Karte ein. Beispielsweise:

<img src="/images/karte.gif" alt="Landkarte" usemap="#Landkarte"/>

Damit die Punkte anklickbar sind legen wir nun Image Maps an.

<map id="Landkarte" name="Landkarte">

<area shape="rect" coords="252,80,272,100"
href="Ziel des Links" alt="Foto1" title="Foto1" />

</map>


Wir könnten nun für jedes Bild ein area-Tag anlegen, besser und schneller geht es allerdings mit der erstellten XML-Datei. Dafür müssen wir die Datei auslesen. Hierfür nutze ich SimpleXML, das bei PHP5 standartmäßig eingebunden ist.

$XML_inhalt= simplexml_load_file('../_files/fotogalerie/fotogalerie.xml');

Um für jedes Bild ein area-Tag auszugeben verwenden wir eine Foreach-schleife.

foreach ($XML_inhalt->bild as $aktbild) {}

In der For-Schleife wird nun das area-Tag erzeugt. Dabei binden wir die Informationen Name, Beschreibung und Koordinaten aus dem ausgelesenen XML-Dokument ein. Beispielsweise:

echo '<area shape="rect" coords="'.$aktbild->koordinaten.'" href="" alt="'.$aktbild->beschreibung.'" title="'.$aktbild->beschreibung.'" />';


Schritt 3 - die Ausgabe

Jetzt können wir bereits die aktiven Flächen auf unserer Karte erkennen, was fehlt, ist das Anzeigen der entsprechenden Bilder. Sie sollen in einer Ebene erscheinen, die allerdings nicht permanent eingeblendet werden soll. Im Folgenden die Ebene samt Style. Es ist hier empfehlenswert eine ID anzulegen, da wir diese auch später noch verwenden.

<div id="foto"> </div>

#foto{

width:420px;
border:1px solid #000000;
position:absolute;
left:580px;
top:-1000px;

}


Statt den Wert top negativ zu setzen und damit die Ebene aus dem sichtbaren Bereich zu verbannen, könnte man auch das Attribut visibility:hidden verwenden.

Wie ihr bestimmt schon gemerkt habt, fehlte bei den area-Tags der Wert für den Link. Dafür schreiben wir jetzt eine kleine Javascriptfunktion. Mit dieser Funktion ersetzen wir das Hintergrundbild unserer verborgenen Ebene mit dem jeweils anzuzeigenden Bild. Ausserdem weisen wir der Ebene einen neuen top-Wert zu und verschieben sie damit in den sichtbaren Bereich.

function zeige_foto(name){

document.getElementById("foto").style.background ="url(/_img/fotogalerie/prenzlauer_berg/"+name+") no-repeat #ffffff";

document.getElementById("foto").style.top ="130px";

}


Wenn ihr die Funktion erstellt habt, so kann der href-Wert in der Foreach-Schleife gesetzt werden.

javascript:zeige_foto(\''.$aktbild->name.'\')

Wenn ihr das gemacht habt, testet doch einmal die Galerie. Jetzt müßte beim Klick auf jeden aktiven Punkt das entsprechende Foto erscheinen.

Schritt 4 - Schliessen des Fensters und Ausgabe der Bildbeschreibung

Was nun noch fehlt, ist zum einen das Schliessen des Fensters und zum anderen die Bildunterschrift. Dazu fügen wir nun in die verborgene Ebene zwei weitere Ebenen ein. Die erste Ebene bietet uns die Möglichkeit das Fenster zu schliessen:

<div style="background-color:#ffffff; width:75px; float:right;">

<a href="javascript:verberge_foto()">schliessen</a>

</div>


Die entsprechende Javascriptfunktion verberge_foto() setzt den top-Wert wieder ins negative und verbirgt sie damit.

function verberge_foto(){

document.getElementById("foto").style.top ="-1000px";

}


Wenn ihr das ganze jetzt testet, müßte die Bildausgabe verschwinden. Um nun die Bildunterschrift anzeigen zu lassen binden wir folgendes ein:

<div id="bildunterschrift"> </div>

und den entsprechenden Style:

#bildunterschrift{

margin-top:305px;
background-color:#ffffff;
color:#000000;
width:415px;
text-align:left;
padding-left:5px;

}


Jetzt sollte unter den Bildern ein weißer Streifen sichtbar werden. Um hier die Beschreibung auszugeben müssen wir die Javascriptfunktion zeige_foto() erweitern. Wir übergeben jetzt auch die Beschreibung:

javascript:zeige_foto(\''.$aktbild->name.'\', \''.$aktbild->beschreibung.'\')

Die Funktion sieht dann folgendermaßen aus:

function zeige_foto(name, beschreibung){

document.getElementById("foto").style.background ="url(/images/fotogalerie/"+name+") no-repeat #ffffff";
document.getElementById("foto").style.top ="130px";
document.getElementById("bildunterschrift").innerHTML = beschreibung;

}

In die neue Ebene wird per Javascript die Beschreibung geschrieben.

Letzte Schritte

Im Grunde ist die Galerie nun fertig, eine Kleinigkeit sollte dennoch hinzugefügt werden. Wenn wir für die Bildbeschreibung Umlaute verwenden, so werden diese nicht richtig dargestellt. Unser XML-Dokument haben wir mit utf8 codiert, also sollte nun um jede Ausgabe der Beschreibung eine decodierung gelegt werdden:

utf8_decode($aktbild->beschreibung)

Wenn das passiert ist sind wir schon am Ende. Ich hoffe ihr habt Spaß beim Nachbasteln. Über Rückmeldungen und Anmerkungen würde ich mich sehr freuen.


Alle Dateien im Überblick(mit Beispielswerten):

XML-Datei
PHP-Datei(im Textformat)
Javascript-Datei
CSS-Datei

zum Seitenbeginn
alle Tipps
Vorschau des Ergebnisses