 PopUp-Window in Bildgröße - Version 2
Ein Klick auf ein Vorschaubild öffnet ein PopUp-Window in passender Größe mit der Großansicht der Grafik. Version 2 ohne Übergabe des Bildtitel-Textes. Es wird ein default Titeltext angezeigt, der für jedes PopUp-Window gleich ist.
|
|
PopUp-Window in Bildgröße 02 - default Titeltext
UPDATE 27.12.2011 Korrektur Script, Anzeige in der Bildschirmmitte statt Fenstermitte
Die Funktion
1) übernimmt Angaben für Bildquelle und Bildmaße
2) öffnet ein PopUp-Window passend (in der Bildschirmmitte)
3) schreibt den HTML-Code für die darin dargestellte Bildseite
4) überwacht einen MouseClick um das Window zu schließen
5) überwacht einen Focusverlust um das Window zu schließen
3) wahlweise an fester Position oder in der Bildschirmmitte
Zum Ausblenden eines angezeigten PopUp-Windows kann man gleich das nächste Vorschaubild anklicken! Klicken ins 'Leere' schließt das Fenster ebefalls.
Die Übergabe eines Titel-Texts für jedes Bild erfolgt hier nicht. Für alle Bild-PopUps wird ein und derselbe Text angezeigt, den Sie allerdings festlegen können.
|
|
Ganz praktisch: Ein bereits geöffnetes PopUp-Window wird durch einen Klick an beliebiger Stelle geschlossen. Sie müsssen nicht das kleine rote Schließen-Symbol  ansteuern. Das bedeutet auch, ein Klick auf das nächste Vorschaubild schließt das aktull angezeigte PopUp-Window, während das neue geöffnet wird! Bei Focusverlust der Seite wird das PopUp-Window ebenfalls automatisch geschlossen. Daraus folgt: Ein aufgerufenes Fenster (wenn es eines gibt) steht immer im Vordergrund. PopUp-Windows verschwinden nicht in der Startleiste.
Titeltext
Ein Standard-Titeltext wird in der Titelzeile der PopUp-Windows angezeigt. Dieser Text ist (anders als im Beispiel 01) jedesmal gleich. Den kurzen Text können Sie aber frei festlegen:
// Default Titeltext
var Titeltext = "click to close";
Vorteile für diese Bilddarstellung
- Die Größe des PopUp-Windows wird jedesmal beim Aufruf festgelegt
- das PopUp-Window wird ohne Menüleiste angezeigt
- Die Vorschau-Bilder sind alle sofort zu sehen
- Durch kleine Vorschaubilder schnelle Ladezeiten
- Der Besucher entscheidet selbst welches Bild er nachladen / sehen möchte
- Er kann das Foto so lange ansehen wie er möchte
- Klicken (irgendwo) schließt ein aktives PopUp-Window.
- Focusverlust schließt ein aktives PopUP-Window durch onBlur()
Aufwand für den Webmaster
- JavaScript in den Head-Bereich kopieren
- Eintrag für die Fensterposition ändern (wahlweise)
- Aufruf für das PopUp-Window in den Links notieren
- die 4 Eintragungen in den Links anpassen
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript  JavaScript Menü 01
3 Eintragungen für die Großansicht im Bildfenster
Der Link im Aufruf enthält 3 Informationen: 'welches Bild' , 'wie breit' und 'wie hoch'. Den Rest der Arbeit erledigt das JavaScript im Head-Bereich.
Übergabeparameter für:
a) Bildquelle: Pfad, Dateiname
b) Breite in Pixel
c) Höhe in Pixel
javascript:BildFenster02(' a ',' b ',' c ');
Aufruf der JavaScript-Funktion für das PopUp-Window:
<a href="javascript:BildFenster02('foto-gross.jpg','5000','375')" ...
Pfadangaben!
Wenn die Bilder nicht im gleichen Ordner abgelegt sind, sollten sie den Pfad eintragen.
<a href="javascript:BildFenster02('../images/foto-gross.jpg','500','3750')" >
häufige Fehlerursachen
Die Angaben für die Referenz (href) stehen in (doppelt-gestrichenen) Anführungszeichen. Beginnend mit dem ersten, enden die Angaben mit dem nächsten. Logisch, das zwischen den beiden Anführungszeichen dann keine weiteren (doppelt-gestrichenen) Anführungszeichen stehen dürfen.
Da aber die 4 zu übergebenden Werte ebefalls in Anführungszeichen stehen sollen, verwendet man dazu die eingestrichenen Anführungszeichen
Tastenkombination für das Hochkomma: Umschalt + #
|
|
 Achten Sie auf die (eingestrichenen) Anführungszeichen !
<a href="javascript:BildFenster02('foto.jpg','500','375')">
kleines Foto
</a>
Wenn sie ihre eigenen Bildquellen eintragen
Zur Anpassung folgende Änderungen im Link:
| Element |
hier im Beispiel |
ersetzen mit |
| Bildquelle |
foto-gross.jpg |
Pfad/Dateiname |
| Breite |
500 |
Wert in Pixel |
| Höhe |
375 |
Wert in Pixel |
Positionsbestimmung wahlweise
Sie können das Bildfenster wahlweise an fester Position anzeigen lassen oder durch das Script die Position in der Bildschirmmitte errechnen lassen. Das bestimmen sie selbst. Den Eintrag dazu finden sie im Script:
var FestePosition = "ja";
Wenn eine feste Position für die Anzeige gewünscht wird, dann tragen sie für die Variable 'FestePosition' ein "ja" ein und legen die X- / Y-Werte für die linke obere Ecke des Bildfensters in den beiden Variablen fest. Die Werte beziehen sich auf die Abstände in Pixel für die linke obere Ecke des PopUp-Windows.
VonLinks = 20;
VonOben = 20;
Wenn sie den Eintrag mit "nein" festlegen, versucht das Script die Position zu ermitteln.
Script in externe JavaScript-Datei Auslagern
Lagert man die Funktion in eine externe JS-Datei aus, kann man aus mehreren HTML-Dateien darauf zugreifen. Eine separate JS-Datei würde ich überall dort einsetzen, wo gleiche Funktionen immer wieder in unterschiedlichen Seiten verwendet werden sollen.
Funktionen wie dieses Bild-PopUp, die in mehreren HTML-Dokumenten verwendet werden sollen, kann man ganz wirtschaftlich in eine externe Datei auslagern.
Ein Beispiel mit diser Funktion, finden sie hier als
 ZIP-Datei zum Download
ähnliche Themen
 PopUp-Window für eine Grafik 01 - passend öffnen mit Titeltext
PopUp-Window für eine Grafik 03 - in festgelegter Größe öffnen
PopUp-Window für eine Grafik 04 - passend öffnen mit Infotext beim Anklicken
PopUp-Window für eine Grafik 05 - passend öffnen mit Beschreibungstext im Window
DHTML-Box einblenden - Großansicht für eine Grafik ohne PopUp-Window
Ab hier finden sie lediglich zusätzliche Informationen:
Info zur automatischen Positionsbestimmung
Nach dem Update (15.02.2010):
Das PopUp-Window soll bei der automatischen Positionsbestimmung auf dem Bildschirm zentriert angezeigt werden. Dazu werden die Bildschirmabmessungen festgestellt (maximal verfügbare Bildschirmgröße in Pixeln). Nach dem Update am 15.02.2010 verwende ich dazu
screen.availWidth;
screen.availHeight;
JavaScript-interne Funktionen die im IE ab 4.0, Opera ab 5.12, FF ab 1.0 Konquero ab 4.12 und Safari ab 1.0 funktioniert.
Vor dem Update:
Das geschah browserabhängig mit unterschiedlichen Anweisungen. Browser reagierten recht unterschiedlich. Informationen dazu können sie hier einblenden:
 Bisher: Abweichungen der Anzeigeposition - Info einblenden / ausblenden
Info zur Abweichung der Anzeigeposition vor dem Update
Zur Positionsbestimmung wurde die Fenstergröße ermittelt. Diese Werte beziehen sich auf das aktuelle Fenster (blaue Pfeile). Füllt das aktuelle Fenster nicht den gesamten Bildschirm (zum Beispiel in einem Frameset), erscheint das PopUp-Window nicht in der Mitte dieses aktuellen Fensters.
Grund: Ermittelt wurden die Fenstermaße im aktuellen Fenster des Frames (gelb). Bei der Positionierung wurden die errechneten Werte eingesetzt, die als Bezug für die Positionsbestimmung des PopUp-Windows aber die linke obere Ecke des Bildschirms annehmen.
Die Anzeige des PopUps vor meinem Update basierte in einem Frameset auf die Abmessungen des aktiven Frames (gelber Bereich), wurde also nicht wirklich in der Bildschirmmitte dargestellt. Das sollte mit dem Update behoben sein.
Bei einer Seite ohne Frames stimmte der errechnete XY-Wert für eine genaue Anzeige in der Bildschirm- und Fenstermitte, da beides identisch ist. Aber auch das traf nur für ein Browserfenster zu, das maximiert (nicht verkleinert) war.
Info ausblenden
Hinweis zur Innenhöhe beim IE6 - einblenden / ausblenden
Auch dieses Problem gibt es nun nicht mehr!
(Beschreibung nur noch als Info)
Im IE6 gibts ein Problem bei der Art und Weise der Höhenbestimmung abhängig von der DOCTYPE-Angabe des HTML-Dokuments. Offenbar wird, abhängig von der Deklaration des Dokumenttyps mit DOCTYPE, im IE6 u.U die gesamte Dokumenthöhe ausgelesen, nicht die innere Fensterhöhe. Das würde z.B. hier, bei meinem Dokument 2815 Pixel bedeuten!
Ein Bildfenster, irgendwo bei 1300 Pixel (vom oberen Bildschirmrrand gemessen) angezeigt, wäre nicht sichtbar.
1) Nutzt man diese TYPE-Angabe klappts aber auch mit der alten Programmzeile zur Innenhöhenbestimmung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
(Sie müssen also nichts abändern)
2) Falls sie im IE6 Probleme haben und sie es bei ihren abweichenden DOCTYPE-Angaben belassen möchten, schafft eine Änderung im Script (Auszug) Abhilfe. Sie ersetzen die durchgestrichene Zeile durch die darunter in blau dargestellte Programmzeile:
else if(ie4) {
sbreite = document.body.clientWidth;
shoehe = document.body.clientHeight;
shoehe = document.documentElement.clientHeight;
alert(shoehe); // Meldung der festgestellten Höhe - als Test
}
Die Zeile mit der alert-Meldung (orange) können sie während des Testens 'einbauen'.
Zitat SELFHTML:
Im Internet Explorer können Sie mit document.body.clientHeight die innere Fensterhöhe bestimmen. Wenn Sie eine Dokumenttyp-Deklaration einsetzen, die im Internet Explorer 6 den Seite standardkonformen Modus auslöst, müssen Sie document.documentElement.clientHeight statt document.body.clientHeight verwenden.
|
Info ausblenden
Update Info
Im Laufe der letzten Jahre wurd das Script immer wieder angepasst.
1) Durch einen erneuten Linksklick auf ein anderes Vorschaubild wird ein bereits geöffnetes Bildfenster geschlossen
2) Bei Focusverlust wird das PopUp ebenfalls automatisch geschlossen.
Daraus folgt: Ein aufgerufenes Fenster steht immer im Vordergrund. PopUps verschwinden nicht in der Startleiste.
3) Ärger mit NS 7.x set Focus() ausgeräumt
4) Mozilla meckert nicht mehr (13.07.2004)
5) Für DreamWeaver wurde der String 'JavaScript' zerpflückt, damit er nicht mehr zusammenhängend erscheint und einen vermeintlichen Fehler anzeigt.
6) Der String 'body' wurde 'zerpflückt', damit er nicht mehr zusammenhängend erscheint und einen vermeintlichen Fehler auslöst.
7) Die Fensterposition kann berechnet oder festgelegt werden.
8)Bildschirmmitte statt Fenstermitte
9) Positionsbestimmung fest oder automatisch
|
Home • Bilder • PopUp im Bildmaß 02
Donwnload
Beispiel
)
)