Foto popup [Javascript ist Toll!]

19. August 2005 - 01:16

Foto popup

Beschreibung

Ein Javascript, mit dem man vergößerte Bilder anzeigen lassen kann. Das Skript paßt die Popupgröße automatisch an die Größe des Bildes an. Das Popup läßt sich zentrieren und je nach Einstellung, mit einem Klick auf das Bild oder automatisch wenn das Popup den Fokus verliert, schliessen.

Die Variante hat auch ohne eingeschaltetes Javascript eine Funktion. D.h. das Bild wird auf jeden Fall angezeigt, entweder in einem Popup oder im aktuellen Browserfenster. Das Popup wird beim verlassen der Seite automatisch wieder geschlossen.

Optionen

In der Datei popup.js ist ein Abschnitt mit Variabeln, mit denen sich das aussehen und verhalten des Popups anpassen läßt.

///////////////////////////////////////////////////////////
// Einstellungen
var className  = 'popup'; // sollte nicht geändert werden.
var bgColor    = '#fefefe';
var color      = '#303030';
var font       = '10px courier';
var rahmen     = '4px ridge black';
var margin     = '0px 0px';
var center     = true;
var close      = 'click'; // Mögliche Werte: 'blur', 'click', ''
var max_x      = screen.width - 100;
var max_y      = screen.height - 100;
var untertitel = true;

Auschnitt aus dem Quellcode

Die Bedeutung der einzelnen Einstellungen:

Variabel	Verwendung	Beispiel
bgColor	Hintergrundfarbe des Popup Dokumentes im CSS üblichen Formaten	`var bgColor = 'white'`
rahmen	Definiert einen Rahmen für das Bild in der CSS Kurzschreibweise: Rahmen, der erste wert muss die Pixelgröße sein, da dieser Wert in die Fenstergrößenberechnung einfließt.	`var rahmen = '0px dotted black';`
margin	Definiert einen Aussenabstand zwischen Bild und Fensterrahmen. Der erste Wert ist für den Abstand oben und unten, der zweite Wert für rechts und links vom Bild.	`var margin = '1px 2px';`
center	Kann die Werte `true` oder `false` einnehmen. Bestimmt ob das Fenster mittig auf dem Bildschirm positioniert wird. (Im Opera Browser kann die zu Problemen führen, da er Popups nur innerhalb des Hauptfensters positioniert)	`var center = true;`
close	Bestimmt wie das Fenster geschlossen werden kann. Mögliche Werte sind: `'blur'`, `'click'` oder `''`. `'blur'` heißt das Fenster wird geschlossen, wenn es den Focus verliert (Default Einstellung), `'click'` schliesst das Fenster bei einem Klick auf das Bild und wird ein Leerstring eingtragen muss das Popup von Hand geschlossen werden. (Es wird aber trotzdem beim verlassen der Seite geschlossen).	`var close = 'click';`

Anwendung

Mit folgende Zeilen wird das Skript in den Header eingebunden:

<script type="text/javascript" src="add_event.js"></script>
<script type="text/javascript" src="popup.js"></script>

Das Skript in die HTML Seite einbinden

Jetzt kann ganz einfach die Funktion eingebaut werden. Der HTML code für ein Thumbnailbild sieht dann so aus:

<a href="grossesBild.jpg"
 alt="Zum vergößern auf das Bild klicken"
 description="Text der unter dem Bild angezeigt werden soll."
 class="popup"
><img src="kleinesBild.jpg" alt=""></a>

HTML Code um das Skript aufzurufen

Beispiele

Download

popup.js (ca. 4 KB)

Außerdem wird noch die folgende Bibliothek gebraucht:
add_event.js

Browser

Das Skript sollte in allen Browsern die Javascript können funktionieren.

Mozilla 1.7 erscheint ein horizontaler Scrollbalken. Da dieses Problem im Firefox nicht auftritt, vermute ich das es auch in neueren Versionen nicht mehr da ist. Die Funktionsfähigkeit ist dadurch aber nicht beeinträchtigt.

Opera zeigt Popups in der Defaulteinstellung innerhalb des Browsers an, daher wird das Popup nicht zentriert (bei der Option popup_center = true).

Ich habe das Skript mit folgenden Browsern getestet:

IE 4 (win95)
IE 6 (winXP)
FF 1.0 (winXP)
MZ 1.6 (winXP)
OP 7.11 (winXP)
OP 8.01 (winXP)

Warum ist das Skript so lang?

Die Frage ist berechtigt, da es normalerweise ausreichen sollte, das Popup einfach mit einer bestimmten Größe (der des Bildes) zu öffnen. Doch leider sieht jeder Browser das mit der Größe unterschiedlich. Die einen berechnen bei der Gr??e den Rahmen des Window Fensters mit, die anderen eventuelle Scrollbalken oder gar die Titelzeile.

Deshalb schreibt das Skript ein JS in das Fenster, das nach dem laden des Bildes eine Funktion aufruft, die das Popup neu berechnet.

40 Comments

Einen Kommentar hinterlassen »

Kommentare

« Zurück 1 2

21. von Stefan
Donnerstag 22.Februar 2007: 18:46

Klasse Script. Genau so soll es sein.

22. von barattt
Mittwoch 21.März 2007: 17:19

Ich habe einige Bilder auf der Seite, die sehr breit sind (Panoramabilder). Hier wird nur der Linke Teil angezeigt und kein Horizontaler Scroll Balken. Im Firefox kann man mit den Cursortasten scrollen, im IE geht das leider auch nicht.

23. von Andreas
Freitag 30.November 2007: 09:03

Verwendet man Webseiten mit utf-8 codierung so sollte man aus diesem Script alle Umlaute entfernen oder passend codieren. Es gibt sonst im IE6 Fehlermeldungen in der Statuszeile und man wundert sich, wo die herkommen.

24. von moonbasealpha
Sonntag 2.Dezember 2007: 14:30

Hallo, wirklich gutes script, einzig, bei größeren Bildern bräuchte ich einen vertikalen Scroll-Balken da der Rest vom Bild nicht angezeigt wird (geht über den Screenrand hinaus)Im IE (nach Einstellung) funktioniert das auch super, aber im FireFox(2.0.0.11) klappt das einfach nicht, es erscheint kein Scrollbalken. Kann man das ändern?
Gruß

25. von moonbasealpha
Sonntag 2.Dezember 2007: 15:01

Hallo, habs doch gefunden: im "popup.js" hab ich "overflow:hidden" auf "auto" gestellt und auch "scrollbars:yes" aktiviert. Nun gehts auch im Firefox.
Grüsse

26. von wegmann
Donnerstag 21.August 2008: 23:58

Kann es sein, dass sich das Script gegenüber der Beschreibung zwischenzeitlich ein wenig verändert hat?
Ich konnte z.B. nicht erkennen, wie der Untertitel 'description' in das Popup kommen soll.
Gruss
Peter

27. von thielen
Sonntag 21.September 2008: 22:56

danke für das script, aber bei mir öffnet sich das bild auf einer neuen großen seite, also nicht angepasst an das grosse bild. was habe ich falsch gemacht?
danke im voraus

28. von thielen
Sonntag 21.September 2008: 22:58

muss nochmal schreiben........
email war ein tippfehler..danke für das script, aber bei mir öffnet sich das bild auf einer neuen großen seite, also nicht angepasst an das grosse bild. was habe ich falsch gemacht?

29. von Mobbes
Sonntag 4.Januar 2009: 14:45

Super Script, danke erstmal.
Meine Frage ist die, kann man es auch so ändern, das man , wenn man mit der maus drüber geht , ein anderes bild automatisch aufgeht?

Vielen Dank im voruas

30. von Heiner
Donnerstag 8.Januar 2009: 22:32

Super Script, danke dafür. Funktioniert wirklic klasse. Was mich noch interessieren würde ist, ob man das popup noch etwas in der lage veränern kann? Also zb nicht ganz znetriert, sondern etwas weiter oben. Was absoluter wahnsinn wäre, ist wenn bei klick aufs bild, das nächste kommen würde. bei rechtsklick aufs bild schließt es sich. mfg

31. von Peter Uebers
Samstag 24.Januar 2009: 21:20

danke für das Skript. Funktioniert tadellos bei HTML-Seiten.
Allerdings habe ich jetzt das Problem, dass der Skript auf einer Frame-Seite nicht funzt.
Das Bild geht im Browserfenster auf.

Bevor die bösen Kommentare kommen: Jaaa, es gibt auch gute Gründe Frame-Seiten zu verwenden. Das lässt sich nicht immer vermeiden.

Kennt jemand das Problem? Gibt es da eine Lösung?

mfg
Peter

32. von Peter Uebers
Sonntag 25.Januar 2009: 23:51

Ich habe das Problem gefunden. Der Fehler lag bei mir. Ich verwende einen Skript zum Nachladen der Frames. Dort mussten die Events ebenfalls neu initialisiert werden.

Nochmals herzlichen Dank für das geniale Skript.

33. von qweqweqw
Freitag 21.August 2009: 15:34

das problem bei all diesen scripten ist, dass sie nicht mit bilder funktionieren die breiter als der bildschirm sind. schade!

34. von Struppi
Montag 24.August 2009: 10:50

Es kommt drauf an, was du unter funktionieren verstehst. Dieses Skript vergrößert das Fenster auf die Breite des Bildschirms. Es funktioniert also.

35. von drumsetille
Freitag 9.Oktober 2009: 22:27

super..danke...endlich mal was vernünftiges...ohne Werbung..und einfach ehrlich..

TOLLES SCRIPT....auch...vielen vielen dank..
Genau das hab ich gesucht.. ;o)

36. von trendsetzer
Montag 5.Juli 2010: 02:59

Hallo habe alles in die homepage integriert, allerdings wird das grosse bild nur auf einer neuen seite gezeigt, nicht jedoch in einem neuem, der bildgrösse angepasstem popup. Benutze einen mac und safari 5.0. Was könnte falsch sein?
Gruss trendsetzer

37. von Struppi
Montag 5.Juli 2010: 13:15

Ich hab keinen Mac, aber unter Windows funktioniert das Skript auch mit Safari (ich hab allerdings eine 4'er Version).

38. von plums
Montag 29.November 2010: 02:16

Fachhochschule

39. von hhjoost
Mittwoch 16.Februar 2011: 14:24

Hallo,
prima Idee.
Leider funktioniert die Sache aber nur, wenn die
Bildauflösung kleiner als die Bildschirmauflösung ist.

Wie kann man es erreichen,
dass bei einem Hochformatbild das Ausgabefenster automatisch auf Bildschirmhöhe angepasst
und bei einem Querformatbild das Ausgabefenster automatisch auf Bildschirmbreite angepasst wird?

Ach, das könnte schön sein:

V.G. Jo

40. von Lodda
Mittwoch 22.Juni 2011: 10:35

Hoi an Alle!!!
Diese Script ist deeeer oberhammer. Einfach 1A
Eine NewBi Frage habe ich jedoch: Ich möchte, dass das große Foto gleich beim Öffnen der Seite geladen wird.
Also im Body-Tag onLoad usw.
Das krieg ich irgendwie nicht hin. Das Bild heisst 001.jpg. Könnte mir einer sagen wie das geht??
Viele Grüsse vom Lodda

« Zurück 1 2

Javascript ist Toll!

Foto popup

Beschreibung

Optionen

Anwendung

Beispiele

Download

Browser

Warum ist das Skript so lang?

Ähnliche Artikel

40 Comments

Kommentare

Einen Kommentar hinterlassen

Das Neuste

Kategorien

am meisten gelesen

zuletzt kommentiert

Archiv

Blogs

Wortwolke