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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
var picture_window;

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;
}

« Lees de omschrijving en reacties

Inhoudsopgave

  1. PIP - Inleiding
  2. Custom attributen
  3. image_popups.js
  4. open_picture_win
  5. PHP to the rescue

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.