 PopUp-Window in Bildgröße - Version 1
Ein Klick auf ein Vorschaubild öffnet ein PopUp-Window in passender Größe mit der Großansicht der Grafik. Version 1 mit Übergabe des Bildtitel-Textes
|
|
PopUp-Window in Bildgröße 01 - mit Titeltext
UPDATE 15.02.2010 17:00 Uhr, Anzeige nun in der Bildschirmmitte statt Fenstermitte
Statt eines simplen Verweises auf eine Grafik  Beispiel hier 
wird ein Verweis auf die Funktion BildFenster01() eingetragen.
Ein Vorschaubild (siehe rechts) oder ein Text dient als Verweisbereich (kann angeklickt werden).
|
|
<a href="BildFenster01()">
<img src="klein.jpg" width="150" height="113" border="0" alt="">
</a>
Beim Aufruf geben wir der Funktion noch einige Infos mit auf den Weg. Den Rest erledigt die Funktion intern. Beim Anklicken der Vorschau wird dann ein PopUp-Window in passender Größe geöffnet. (mehr dazu weiter unten)
<a href="javascript:BildFenster01('gross.jpg','400','300','Titeltext')">
<img src="klein.jpg" width="150" height="113" border="0" alt="">
</a>
Aufgabe der Funktion
1) übernimmt Angaben für Bildquelle, Bildmaße und Titeltext
2) öffnet ein PopUp-Window in passender Größe
3) wahlweise an fester Position oder in der Bildschirmmitte
4) überwacht einen MouseKlick um das Window zu schließen
5) überwacht einen Focusverlust um das Window zu schließen
| |
 |
Wenn sie in einer Bildergalerie mehrere Großansichten nacheinander ansehen möchten, können sie gleich das nächste Bild anklicken! Das gerade angezeigte Fenster wird automatisch geschlossen. Außerdem: Klicken auf das Foto oder Klicken ins 'Leere' schließt das Fenster.
Ganz praktisch: Ein bereits geöffnetes PopUp-Window wird durch einen Linksklick 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 alte 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.
Vorteile für diese Bilddarstellung
- Größe des PopUp-Windows wird jedesmal beim Aufruf festgelegt
- Bildbeschreibung in der Titelleiste
- 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 groß 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
- 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
4 Eintragungen im Aufruf
Im Aufruf der der Funktion für das Bildfenster werden 4 Parameter übergeben:
a) Bildquelle: Pfad/Dateiname
b) Breite des Bildes in Pixel
c) Höhe des Bildes in Pixel
d) Titeltext für das Window
<a href="javascript:BildFenster01(' a ',' b ',' c ',' d ');">  </a>
Auszug:
<a href="javascript:BildFenster01('foto-gross.jpg','240','180','Titeltext')">
Der Link im Aufruf enthält 4 Informationen: 'welches Bild' , 'wie breit' , 'wie hoch' und 'welcher Text in der Titelleiste des Windows'. Den Rest der Arbeit erledigt das JavaScript.
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:BildFenster01('foto.jpg','240','180','Titeltext')">
kleines Foto
</a>
Pfadangaben
Wenn die Bilder nicht im gleichen Ordner abgelegt sind, sollten sie den Pfad eintragen.
<a href="javascript:BildFenster01('../images/foto.jpg','240','180','Titeltext')">
Eintragungen im Link des Funktionsaufrufs:
| Element |
hier im Beispiel |
ersetzen mit |
| Bildquelle |
foto-gross.jpg |
Pfad/Dateiname |
| Breite |
240 |
Wert in Pixel |
| Höhe |
180 |
Wert in Pixel |
| Titeltext |
Text |
ihrem Text |
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 legen Sie selbst fest. Den Schalter 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.
ähnliche Themen
 PopUp-Window für eine Grafik 02 - passend öffnen ohne 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.
Update-Info
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) 2007 Die Fensterposition kann berechnet oder festgelegt werden.
8) 2010 Bildschirmmitte statt Fenstermitte
|
|
|
Home • Bilder • PopUp im Bildmaß 01
DOWNLOAD
wird ein Verweis auf die Funktion BildFenster01() eingetragen.;){kind=small}
dient als Verweisbereich (kann angeklickt werden).
;)
;)