Brossmann Webpublishing

Werkzeuge für Selbermacher

Popup Pictures

Auf Ihren Webseiten gibt es eine Übersicht kleiner Fotos oder Grafiken? Sie brauchen eine Funktion, um zu jedem der kleinen Bildchen ein größeres anzuzeigen?

popPic ist eine Javascript-Funktion, die Einzelbilder im neuen Browserfenster anzeigt. Die aktuelle Version können Sie sich kostenfrei und zur freien Verwendung auf Ihren Rechner laden: popPic V3.0 — Bitte beachten Sie in diesem Zusammenhang meine Anmerkungen zum Urheberrecht.

Das kurze Skript verwende ich gerne und häufig, so zum Beispiel auch hier, auf der Seite meiner Kundenreferenzen, um Interessierten Screenshots in höherer Auflösung zeigen zu können.

Detailinformation

popPic besteht aus einer Javascript-Funktion namens popPic(), der beim Aufruf in HTML-Dateien vier Parameter mitgegeben werden:

• Der Titel, also eine Überschrift für das neue Fenster
• Die Adresse der Grafikdatei, die angezeigt werden soll; entweder relativ zur Position der Datei, in der die Funktion aufgerufen wird, oder absolut beginnend mit http://
• Die Breite der Grafik in Bildpunkten (Pixel)
• Die Höhe der Grafik in Bildpunkten

Das Fenster, in dem die Grafik angezeigt wird, entspricht genau den angegebenen Dimensionen, es werden keine Ränder hinzugefügt. Das Fenster wird auf dem Bildschirm zentriert. Im Fenstertitel erscheint die im ersten Parameter angegebene Überschrift. Unten rechts im Fenster wird ein X angezeigt; klickt der Besucher darauf, wird das Bildfenster geschlossen.

Diese Funktionalität gibt es in vielen verschiedenen Varianten. Hier wird sie einmal nicht mit Hilfe der üblichen Tabellentechnik realisiert, sondern ausschließlich auf Basis von Cascading Style Sheets (CSS).

Eine Besonderheit der Funktion besteht darin, dass Bilder mit den gleichen Abmessungen immer im gleichen Fenster angezeigt werden. Dadurch wird verhindert, dass sich beim Ansehen mehrerer gleich großer Bilder hintereinander viele Einzelfenster öffnen.

Einbinden in HTML-Quelltext

Nach dem Download haben Sie im Archiv insgesamt sechs Dateien vorgefunden. Sehen Sie sich zunächst example.html an. Dort erkennen Sie, wie Sie die Skriptdatei poppic.js im HEAD-Bereich Ihres HTML-Quelltextes einbinden.
Im BODY-Bereich der Beispieldatei sehen Sie, wie die Funktion aufgerufen wird. Sie können übrigens die Datei example.html direkt auf Ihrem lokalen Rechner mit einem Browser öffnen und die Anzeige ausprobieren. Zu diesem Zweck liegen zwei Beispielgrafiken bei, thumb.jpg und large.jpg.

In der Beispieldatei sehen Sie auch, wie Sie Ihre Besucher elegant informieren können, wenn diese Javascript nicht aktiviert haben. Lesen Sie dazu auch hier in meinen Tipps den Artikel Warnung vor dem Javascript.

Persönliche Anpassungen

In den ersten Zeilen der Funktion in der Datei poppic.js können ein paar Grundeinstellungen an eigene Vorlieben angepasst werden:

var bgcolor     = "black";
var closeXsize  = 26;
var closeXcolor = "#a21";
var closeXhover = "#36e";
var windowname  = "poppic" + width + height;
var eventhandle = ' onload="self.focus();"';

Die Variable bgcolor gibt die Farbe des Fensterhintergrundes an. (Dieser blinkt meist kurz auf, bevor das Bild geladen wird.) Voreinstellung ist schwarz.

Die Größe des X zum Schließen des Fensters kann angepasst werden. Voreingestellt sind in closeXsize 26 Pixel. Auch die Farben des X können abgeändert werden. Als Grundfarbe ist in closeXcolor ein dunkles Rot eingestellt, als Farbe bei Mausberührung in closeXhover Mittelblau.

Der Name des Popup-Fensters wird auf Basis der Dimensionen des Bildes zusammengesetzt, lautet also zum Beispiel poppic420550. In diesem Fenster werden alle Grafiken abgebildet, die 420 Pixel breit und 550 Pixel hoch sind. Wer dies verhindern will, kann an dieser Stelle den Fenstertitel nach seinen Vorstellungen ändern.

Durch den Inhalt von eventhandle kann man steuern, wie sich das Popup-Fenster verhält, wenn es von anderen abgedeckt und später erneut aufgerufen wird. Die Voreinstellung bedeutet, dass das Fenster bei jedem Neuaufruf in den Vordergrund rückt. Alternativ könnte man das Fenster auch automatisch schließen lassen, sobald es von anderen überdeckt wird:

var eventhandle = ' onblur="self.close();"';

Wichtig ist, dass man sich für eine dieser beiden Lösungen – oder meinetwegen auch für eine ganz andere – entscheidet. Sonst kann es zu Problemen kommen, die ich in einem eigenen Artikel anspreche: Fenster, wo bist du?