open_picture_win
The fun part
De functie open_picture_win is behoorlijk uitgebreid. Wat we er achtereenvolgens in doen is dit:
1. We declareren wat variabelen voor de titel, de HTML-inhoud, de settings van het window voor window.open en 'left' en 'top' voor de positie van het window op het scherm
2. Daarna halen we de breedte (popup_w) en de hoogte (popup_h) uit het object met getAttribute ()
3. Vervolgens sleutelen we de HTML string in elkaar die we in het popup-window gaan schrijven.
4. Dan zorgen we dat de settings voor window.open kloppen, dus de breedte, de hoogte, en de x- en de y-positie van het popup venster.
5. We kijken ook of er al niet een popup venster geopend is. Zoja, dan sluiten we die voordat we een nieuw venster openen.
6. Hierna openen we het popup-venster met de goede settings, we schrijven de HTML-string er naartoe, we geven het popup-venster de focus, we sluiten het schrijven naar het popup-venster met document.close en we zetten een return false; aan het eind van de functie om het standaard-gedrag van de hyperlink te onderbreken.
Okee, genoeg gepraat. Hier is de hele functie:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function open_picture_win (obj) {
var title = "Klik op de foto om het venster te sluiten"
var htmlString;
var settings;
var left;
var top;
var width, height;
width = (obj.getAttribute('popup_w')) ? (obj.getAttribute('popup_w')) : (800);
height = (obj.getAttribute('popup_h')) ? (obj.getAttribute('popup_h')) : (600);
htmlString = '<html><head><title>' + title + '<\/title>';
htmlString += "<style>* {border: 0; margin: 0; padding: 0;} body {background-color: black; overflow: hidden; }<\/style><\/head><body style=\"cursor: pointer\" leftmargin=\"0\" topmargin=\"0\" bgcolor=\"#555555\">";
htmlString += "<img title=\"Klik om te sluiten\" onclick=\"window.close()\" src=\"";
htmlString += obj.href;
htmlString += "\"><\/body><\/html>";
left = (screen.availWidth - width) / 2;
top = (screen.availHeight - height) / 2;
settings = '"toolbar=no, scrollbars=no, left=' + left + ',top=' + top + ',width=' + width + ', height=' + height + '"';
if (picture_window && !picture_window.closed) {
picture_window.close();
}
picture_window = window.open ('', '', settings);
picture_window.document.write (htmlString);
picture_window.focus();
picture_window.document.close ();
return false;
}