Bildergalerie mit JavascriptFotoshow mit Popups und Layern
Keine Navigationsprobleme
Bildergalerie mit Javascript
Bei vielen Bildpräsentationen im Internet kommt es zu Navigationsproblemen, so dass der Anwender leicht die Orientierung verliert und nicht mehr weiß, wie er zum Ausgangspunkt zurückgelangt. Mit der hier vorgestellten Bildergalerie vermeiden Sie diese Probleme. Der Anwender behält die Übersicht und erhält sogar noch zu jedem Bild einen Kommentar oder eine kurze Beschreibung. Im Workshop programmieren Sie zwei Varianten: Mit der ersten werden die Bilder in einem eigenen Popup-Fenster angezeigt, mit der zweiten in einem Layer, der sich im gleichen Browserfenster befindet. Beide Varianten laufen mit allen gängigen Browsern. Die Layer-Variante hat jedoch mehrere Vorteile.
Variablen definieren
Bildergalerie mit Javascript
Die Bildkommentare und zugehörigen Grafikdateien können Sie in einer einzigen globalen Variablen abspeichern. Diese Definition ist für beide Varianten gleich:
var index = 0;
var pairs = new Array();
pairs = [
{titel:'Erstes Bild', bild:'pic1.jpg'},
{titel:'Zweites Bild', bild:'pic2.jpg'}
];
Da die Bilder in exakter Reihenfolge durchgeblättert werden sollen, ist ein Zähler erforderlich, der mit 0 initialisiert wird. Bei der Variablen pairs handelt es sich um eine von Dan Goodman entwickelte simulierte Hash-Table, in der zusammengehörende Werte nebeneinander angeordnet und mit einem Label versehen werden. Beim Anlegen der Table müssen Sie vorwiegend auf die etwas ungewöhnlichen Klammern achten. Diese Hash-Table erlaubt einen besonders schnellen Zugriff auf die Elemente, weil sie wie echte Arrays ansprechbar sind. Sie ist zudem übersichtlich und problemlos zu erweitern. Sie werden sehen: Der Zugriff auf die Elemente ist so elegant und einfach, dass Sie in Zukunft keine mehrdimensionalen Arrays mehr einsetzen wollen.
Die Bilder sollen nicht vorgeladen werden, da ja nicht bekannt ist, ob jeder Besucher sie sehen will. Das spart nebenbei Traffic und dem Anwender unnötige Wartezeit.
Kommen in Ihrem Beschreibungstext deutsche Umlaute vor, so dürfen Sie diese nicht als HTML-Sonderzeichen notieren, sondern Sie schreiben sie unverändert in den Quellcode. Das ist durchaus korrekt und wird auch richtig angezeigt, wenn Sie den richtigen Zeichensatz im Dokument angeben.
Auch die Parameter für das Popup-Fenster lassen sich in nur einer Variablen zusammenfassen:
var param = 'width=400,height=350';
param += ',left=352,top=120';
param += ',status=0,';
param += ',menubar=0';
Mit den einzelnen Parametern legen Sie die Eigenschaften des zu öffnenden Fensters fest. Der in param gespeicherte String wird anschließend der open-Methode als drittes Argument übergeben. Durch diese Vorgehensweise können Sie gegebenenfalls einzelne Parameter schnell hinzufügen oder anpassen und behalten den größtmöglichen Überblick.
Bild auswählen
Bildergalerie mit Javascript
Die folgende Funktion sorgt dafür, dass der Anwender die Möglichkeit hat, sich die ausgewählten Bilder in beliebiger Folge anzeigen zu lassen. Er muss dazu nur auf das jeweilige Vorschaubild klicken:
function choose(nr) {
index = nr - 1;
if((!window.popup)||(popup.closed == true)) {
popup = window.open('popup.html','picWin',param);
if(!popup.opener) popup.opener = self;
popup.focus();
}
else if(popup && popup.document && popup.document.mainpic) {
display(index);
}
return false;
}
Um dem Event-Handler, der die Funktion aufruft, die Nummern der Bilder in der üblichen Reihenfolge übergeben zu können, wird zunächst der Zähler um 1 zurückgesetzt. Dies ist empfehlenswert, weil Javascript mit 0 zu zählen beginnt. Dann prüfen Sie, ob bereits ein Popup existiert oder ob es geschlossen wurde. Falls keines vorhanden ist, wird es mit der Methode window.open() geöffnet. Gibt es bereits ein geöffnetes Popup, übergeben Sie der noch zu definierenden Funktion display() die korrigierte Indexnummer, damit das gewünschte Bild angezeigt wird.
Zur Darstellung der Bilder im Popup wird in der Regel für jedes Bild ein eigenes HTML-Dokument angelegt. Sie lernen hier eine Lösung kennen, bei der Sie nur eine einzige Datei zur Anzeige aller Bilder benötigen. Zu diesem Zweck muss lediglich das Dokument, das für die Anzeige der Bilder im Popup sorgt, ein weiteres Skript enthalten.
Den Namen dieser Datei übergeben Sie der open-Methode als erstes Argument. Das zweite Argument ist dagegen ein beliebiger selbst vergebener Fenstername. Mit ihm stellen Sie sicher, dass alle Bilder in dasselbe Popup geladen werden.
Vor- und zurückblättern
Bildergalerie mit Javascript
Der bisherige Code umfasst bereits die gezielt anklickbaren Vorschaubilder. Der Besucher soll jedoch darüber hinaus die Möglichkeit haben, über zwei Links die gesamte Bilderserie vor- und zurückzublättern. Dafür wird eine eigene Funktion benötigt, die in beiden Skript-Varianten einsetzbar ist:
function flip(direction) {
index += direction;
if(index > pairs.length - 1)
index = 0;
else if(index < 0)
index = pairs.length - 1;
display(index);
return false;
}
Damit die Richtung stimmt, wird erneut der Zähler manipuliert. Dann fragen Sie ab, ob entweder das erste oder das letzte Bild der Serie erreicht ist. Im jeweiligen Fall wird wieder das nächste oder vorige Bild angezeigt. Da pairs wie ein echtes Array über die Eigenschaft length verfügt, bleibt die Abfrage sehr einfach. In der Popup-Variante sollen die Bilder auch vom Popup aus durchgeblättert werden können. In diesem Fall muss diese Funktion daher auch im Popup-Skript zur Verfügung stehen.
Bilder anzeigen
Bildergalerie mit Javascript
Die Darstellung der Bilder übernimmt eine Funktion, die von allen bisher definierten Anweisungen aufgerufen wird. Weil sich beide Varianten hier etwas unterscheiden, sehen Sie sich zunächst die Popup-Variante an:
function display(index) {
var nextPic = new Image();
nextPic.src = pairs[index].bild;
popup.document.pic.src = nextPic.src;
popup.document.title = pairs[index].titel;
popup.focus();
}
Der Aufruf des Image-Konstruktors erfolgt erst in dieser letzten Funktion. Dies hat den Vorteil, dass er nicht für jedes Bild einzeln angegeben werden muss. Über die Eigenschaft src weisen Sie dem Konstruktor die jeweilige Grafikdatei zu. Der Code zeigt Ihnen auch, dass der Zugriff auf die Elemente der Hash-Table sehr intuitiv ist: Er erfolgt genauso wie bei üblichen Arrays über die Indexnummer. Sie brauchen zusätzlich nur das Label der Hash-Table notieren.
Mit der Eigenschaft document.title ändern Sie den im Browser-Fenster angezeigten Titel des Dokuments. Auch er wird – zum angezeigten Bild passend – aus der Hash-Table ausgelesen.
Der bisher erläuterte Code bezieht sich nur auf das zuerst aufgerufene Dokument, also das Elternfenster. Im Skript der Datei popup.html müssen Sie auf dieses Fenster Bezug nehmen. Dazu gibt es die Eigenschaft opener des window-Objekts. Damit wird das Fenster angesprochen, von dem aus ein weiteres Fenster geöffnet wurde. Über opener können Sie auf sämtliche Funktionen des Elternfensters zugreifen und oder es schließen.
Da manche Browser Schwierigkeiten mit opener haben, haben Sie weiter oben sichergestellt, dass diese Eigenschaft in jedem Fall bekannt ist und das richtige Objekt enthält. Denn im Dokument, mit dem der Inhalt des Popups angezeigt wird, müssen Sie dafür sorgen, dass vom Elternfenster aus gezählt wird. Andernfalls würde die Zählung durcheinander geraten, wenn der Anwender einmal vom Popup und einmal vom Elternfenster aus blättert.
Zu diesem Zweck muss auch das jeweilige Bild immer mit der display-Funktion im Elternfenster aufgerufen werden. Vom Popup her geschieht dies mit der Anweisung:
opener.display(opener.index);
Anzeige im div-Bereich
Bildergalerie mit Javascript
Popup oder Layer
Bildergalerie mit Javascript
Ein erster Vorteil der Layer-Variante liegt darin, dass der Beschreibungstext durchaus etwas länger sein darf, weil er direkt auf der Seite mit den Bildern angezeigt wird. Im Popup erscheint er hingegen in der Titel-Zeile des Browsers und sollte deshalb kurz gehalten werden. Auch die Darstellung von Bildern mit verschiedenen Höhen und Breiten bereitet mit der Layer-Variante kaum Probleme.
Gegen Popups zur Präsentation von Bildern gibt es jedoch einen noch schwerwiegenderen Einwand, nämlich das Fokussierungsproblem. Es besteht darin, dass immer nur ein Fenster den Fokus haben kann. Abhängig vom Betriebssystem und Fenster-Manager ist dies für den Anwender unterschiedlich störend. Der Inhalt des Popup-Fensters lässt sich oft nur mühsam vom Elternfenster aus steuern. Daher sollte auch innerhalb des Popup-Fensters eine Steuerungsmöglichkeit bestehen.
Wenn sich aber das Popup kaum mehr vom Elternfenster unterscheidet, ist es im Grunde überflüssig, und Sie können sich von vornherein für eine Lösung mit nur einem Fenster entscheiden.
Alle Dateien und Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.