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

Foto 1 Foto 2

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:

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.

ähnliche Artikel

  • Kein ähnlicher Artikel
  • Comments (41)
    3609 mal gelesen.

    41 Kommentare

    Leave a comment »

    Seiten:

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

    Absolut fantastischer Script!! Gratuliere und herzlichen Dank!

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

    2. Kommentar von: fux
    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. Kommentar von: suppi
    22. Oktober 2005: 18:52

    die alt-tags gehen leider auch nicht aber sonst schick

    4. Kommentar von: Struppi
    25. Oktober 2005: 0: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. Kommentar von: fux
    31. Oktober 2005: 21:04

    hat sich erledigt war mein fehler sry.. nun gehts :)

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

    Hallo,

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

    Balboa

    7. Kommentar von: moep
    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. Kommentar von: XetaNet
    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. Kommentar von: Steffi
    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. Kommentar von: Struppi
    15. Dezember 2005: 13:59

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

    11. Kommentar von: Ralf
    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. Kommentar von: Ulrich Böttcher
    31. Dezember 2005: 1: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. Kommentar von: Philipp
    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. Kommentar von: Struppi
    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. Kommentar von: Philipp
    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. Kommentar von: Andreas
    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. Kommentar von: Andreas
    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. Kommentar von: Struppi
    3. Oktober 2006: 15:09

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

    19. Kommentar von: Andreas
    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. Kommentar von: MuKnu
    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?!

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

    Klasse Script. Genau so soll es sein.

    22. Kommentar von: barattt
    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. Kommentar von: Andreas
    30. November 2007: 9: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. Kommentar von: moonbasealpha
    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. Kommentar von: moonbasealpha
    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. Kommentar von: wegmann
    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. Kommentar von: thielen
    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. Kommentar von: thielen
    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. Kommentar von: Mobbes
    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. Kommentar von: Heiner
    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. Kommentar von: Peter Uebers
    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. Kommentar von: Peter Uebers
    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. Kommentar von: qweqweqw
    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. Kommentar von: Struppi
    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. Kommentar von: drumsetille
    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. Kommentar von: trendsetzer
    5. Juli 2010: 2: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. Kommentar von: Struppi
      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. Kommentar von: plums
    29. November 2010: 2:16

    Fachhochschule :-)

    39. Kommentar von: hhjoost
    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. Kommentar von: Lodda
    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 :-)

    41. Kommentar von: Ricc
    27. Dezember 2012: 2:39

    Es gibt dafür etliche Scripte im Netz, die man nutzen kann. Nur leider funktioniert kaum eines auf Anhieb und für Java-Neulinge sind sie nur schwer anzupassen. Deins hat mich auf Anhieb begeistert.
    Sehr gut gefällt mir, dass die Scripte extra gespeichert werden und man sie auch bei „Include-Seiten“ nur einmal aufrufen muss. Egal wo ich die Funktion nun auf meiner Seite nutze, ich muss nur noch die entsprechenden Links für die Bilder setzen.

    Einfach genial.

    Momentan wird es hier eingebaut, aber auch für alle anderen Bilderfunktionen erweitert.

    Danke für Deine (kostenlose) Arbeit.

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht.

    Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
    marketing-bankruptcy
    marketing-bankruptcy
    marketing-bankruptcy
    marketing-bankruptcy