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

1 2 Weiter »

1. von Andrea
Mittwoch 19.Oktober 2005: 20:08

Absolut fantastischer Script!! Gratuliere und herzlichen Dank!

http://www.enshore.net/test
Online ca. Ende Oktober

2. von fux
Samstag 22.Oktober 2005: 18:47

sieht seht gut aus ...
aber bei mir öffnet sich dann das "grosse Bild"
immer in der Seite .. es geht kein PopUp auf

3. von suppi
Samstag 22.Oktober 2005: 18:52

die alt-tags gehen leider auch nicht aber sonst schick

4. von Struppi
Dienstag 25.Oktober 2005: 00:33

@fux - in was für einen Browser und Betriebsystem?
Das Skript ist in allen mir zu Verfügung stehenden Kombinationen getestet und funktioniert dort soweit.

@suppi - was heißt die alt Tags gehen nicht?
Das alt Attribut ist der Alternativ Text der in Browser angezeigt wird, die keine Bilder darstellen können. Das Skript verwendet im Popup keinen das stimmt, aber wozu?

5. von fux
Montag 31.Oktober 2005: 21:04

hat sich erledigt war mein fehler sry.. nun gehts

6. von Randolph
Dienstag 1.November 2005: 15:32

Hallo,

dies ist genau das Script, nachdem ich fast eine Nacht gegoogelthabe.
Superklasse!!
Vielen Dank.

Balboa

7. von moep
Freitag 4.November 2005: 22:49

hmmm, GEILE Sache...
kann ich auch bestimmen wo das Fenster aufgehen soll? Wenn ja wie und wo mach ich das?

Dankö

8. von XetaNet
Dienstag 6.Dezember 2005: 17:45

Herzlichen Dank für die Mühe, werde es gleich mal probieren.

Habe eine andere Lösung, die etwas schneller reagiert, aber nicht so kompatibel ist.

Gruß aus Spanien
Thomas

9. von Steffi
Sonntag 11.Dezember 2005: 18:55

Hm.. ich, als absoluter "Website gestalten" Newbie habe eine (vielleicht dumme?) Frage.. und zwar:
Wenn ich ca. 100 Bilder hab, aber will, dass sich jedes Bild in einem Popup seiner Größe öffnet, muss ich dann das ganze lange skript für JEDES einzelne bild eingeben?

Sorry falls es eine dumme frage war :/

viele grüße aus Wien/Österreich!!!

Steffi

10. von Struppi
Donnerstag 15.Dezember 2005: 13:59

Nein, natürlich nur einmal, nur musst du jeden Bild den Aufruf "mitgeben"

11. von Ralf
Sonntag 18.Dezember 2005: 10:07

Super Script.
Endlich erspart man sich die blöde EIngabe von Höhe und Breite von jedem Popup Bild.

ISt auch schon online:
http://www.collectorworld.org

12. von Ulrich Böttcher
Samstag 31.Dezember 2005: 01:16

Hallo Struppi, es geht um das Foto popup. Wo Kommt der lange Quelltext hin, in den Body? und wenn ja, bitte wo?
Funktioniert das Ganze auch auf einer htm - Seite?
Danke für Antwort.
Guten Rutsch, Uli B.

13. von Philipp
Mittwoch 11.Januar 2006: 11:54

Eigentlich super, aber ich glaube, dass da ein kleiner Bugf ist, zumindest in dem Skript, das ich habe. Und zwar wird ab der Funktion:
// getHTML(bild, titel, farbe)

in der Zeile:
+ (showBild.popup_close.toLowerCase() == 'click' ? ' document.images[0].onclick=function(){window.close()};' : '')

raus gesprungen aus dem Skript Modus. In meinem Editor wird da auch angezeigt, dass der letzte befehl schon nicht mehr richtig interpretiert wird.

Ist da ein Klammer falsch oder ein Hochkommata?? Ansonsten super Teil. Danke!

14. von Struppi
Mittwoch 11.Januar 2006: 16:05

Mhhhh?
Ich kann das zwar nicht nachvollziehen, hab aber trotzdem mal was geändert und den onclick Part direkt in den HTML Code geschrieben.

15. von Philipp
Mittwoch 11.Januar 2006: 18:03

Ha! Super! tausend tausend Dank!! Jetzt klappt es noch wunderbarer! Jetzt wird sowohl im Editor als auch im Browser alles korrekt getätigt. Vielleicht ist es nie aufgefallen, weil es sonst keiner direkt in die Seite einbauen musste. Aber bei JOOMLA scheint es wohl nur so zu funktionieren, warum konnte mir noch keiner sagen!?! Aber als positiven Nebeneffekt habe ich festgestellt, dass das Fensterschliessen auf click jetzt IMMER funktioniert, vorher nur, wenn das Fenster nicht bewegt worden ist. Habe FF 1.05.
Nochmals tausend Dank!!

16. von Andreas
Dienstag 3.Oktober 2006: 13:45

Hi,
sehr gutes Script! Genau das was ich suche. Allerdings gibt es noch etwas zu verbessern.
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.
Ist es möglich einen H-Scroll Bar einzuschalten um das Problem zu lösen?

17. von Andreas
Dienstag 3.Oktober 2006: 14:01

noch mal meine wenigkeit. Ich hab die Stelle für die Bars im Script gefunden. Besteht eine Möglichkeit das nur auf die H-Bar zu beschräken oder müssen immer beide an sein?
Wenn die Bars an sind passiert es mir im FF manchmal, das das Fenster klein bleibt und nicht auf Bildgröße vergrößert wird. Ich such noch, woran das liegt.

18. von Struppi
Dienstag 3.Oktober 2006: 15:09

OK, das solte jetzt auch funkttionieren, klick mal auf's erste Bild. (nur in Opera noch nicht )

19. von Andreas
Dienstag 3.Oktober 2006: 17:21

Sehr gut. Vielen dank, das Du dir am Feiertag dafür Zeit nimmst. Das klappt jetzt mit den Panoramen sehr gut. Ich mach mich dann ran und bau alles um. Das Script ist jetzt wirklich klasse.

20. von MuKnu
Dienstag 30.Januar 2007: 10:50

Klasse Option... echt einwandfrei und erleichtert vieles...!

Jeoch ein Manko... kann es sein das es nicht mit IE7 läuft?!

1 2 Weiter »

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