/* © Struppi Mail: struebig@gmx.net url: http://javascript.jstruebig.de/skripte/7/ letzte Änderung: 29.03.06 Beschreibung: ------------- Ein Skript um ein Fenster in der Größe eines Bildes öffnen. Benötigt: add_Event.js */ // anonyme Funktion --> keine Globalen Variabeln ( function() { /////////////////////////////////////////////////////////// // Einstellungen var bgColor = '#fefefe'; var color = '#303030'; var font = '10px courier'; var rahmen = ''; // z.b. '1px solid black'; var margin = '5px 5px'; // Der erste Wert Abstand oben/unten der zweite links/rechts var center = true; var close = 'click'; // Mögliche Werte: 'blur', 'click', '' var max_x = screen.width - 50; var max_y = screen.height - 50; var untertitel = true; var className = 'popup'; // Klassennamen der Popoplinks var DEBUG = false; /////////////////////////////////////////////////////////// // interne Variabeln var showFenster = null; var default_width = 60; // sollte möglichst gross sein, wenn Text unter dem Bild steht var default_height = 40; var showBild = function(e) { if(!this.target) this.target = "BildFenster"; if( close == 'blur' || !showFenster || showFenster.closed != false) showFenster = open_win('', this.target, default_width, default_height); if(!showFenster) { return true; } var html = getHTML(this.href, (this.title || this.alt || ''), this.getAttribute('description')); showFenster.document.open(); showFenster.document.write( html ); showFenster.document.close(); var img = new Image(); img.ready = false; img.onload = function() { fitWin(this, showFenster); }; img.onerror = function() { alert('FEHLER!\nBild kann nicht geladen werden.'); if(showFenster) showFenster.close(); }; img.src = this.href; // Workaround: Der IE feuert kein onload wenn die Bilder schon im Cache sind if(img.complete) fitWin(img, showFenster); if(e.preventDefault) e.preventDefault(); e.cancelBubble = true; return false; } ///////////////////////////////////////////////////////////////////// // getHTML(bild, titel) function getHTML(src, title, description) { if(!title) title = 'kein Titel'; var text = '\n' + '\n\n' + '' + title + '<\/TITLE>\n' + '<STYLE type="text/css">\n' + 'body{ margin:0; padding:0;\n' + 'background-color:' + bgColor + ';\n' + 'color:' + color +';\n' + 'font:' + font + ';\n' + 'text-align:center;\n' + '}\n' + 'img{padding:0;' + (rahmen ? 'border:' + rahmen + ';' : '') + 'margin:' + margin + ';' + '\n}\n' + 'div{\n margin:0;padding:0;}' + '\n<\/STYLE>\n' + '\n<\/HEAD>\n' + '<body' + (close.toLowerCase() == 'blur' ? ' onblur="self.close();"' : '') + '>' + '<div style="border:1px solid black" ' + ( close.toLowerCase() == 'click' ? 'onclick=";window.close();"' : '') + '><img galleryimg="no" src="' + src + '" alt="" title="' + title + '"' + '>' + (untertitel ? '<br>'+ description : '') + '</div>\n' + '<\/body><\/html>' ; return text; } /////////////////////////////////////////////////////////// // fitWin(Image, window) function fitWin(i, win) { // verhindert Endlosschleife im Netscape 4 if(i.ready) return; i.ready = i.width > 0; // Das Popup, muss mindestens so breit sein, wie das Bild // erst dann kann die richitge Höhe bestimmt werden, // da der Text erst dann richtig umgebrochen wird. win.resizeTo( i.width, i.height); var win_size = getWinSize(win); var r = 2 * ( parseInt(rahmen) || 0); var m = margin.split(' '); var m_h = 2 * parseInt(m[0] || 0); var m_w = 2 * parseInt(m[1] || 0) var height = document.getElementsByTagName ? win.document.getElementsByTagName('div')[0].offsetHeight : document.all ? win.document.all.tags('div')[0].offsetHeight : i.height ; var width = i.width + r + m_w; if(height > max_y) height = max_y; if(width > max_x) width = max_x; win.resizeBy( (width - win_size.width + r + 2), (height - win_size.height + m_h ) ); if(center && !window.opera) { win_size = getWinSize(win); win.moveTo(( screen.width - win_size.width) / 2, (screen.height - win_size.height) / 2 ); } win.focus(); } // Intialisierung, // alle Links des Dokuments werden durchsucht, // die mit einer Klasse className erhalten einen click Event function popup_ini() { var l = window.document.links; for(var i = 0; i < l.length; i++) { if( l[i].className.indexOf(className) == -1) continue; // Popup Link -> click Event zufügen addEvent( { func: showBild, obj: l[i], evt: 'click' } ); } } // onload addEvent({ obj: window, func: popup_ini, evt: 'load' }); ///////////////////////////////////////////////////////////////////// // ... und am Schluss Fenster schliessen. addEvent({ func: function (){ if(showFenster && !showFenster.closed) showFenster.close();}, evt: 'unload', obj: window }); }() ) ///////////////////////////////////////////////////////////////////// // Ein popup öffnen function open_win(url, fname, w, h) { var tmp = new Array(); tmp[tmp.length] = 'resizable=yes'; tmp[tmp.length] = 'scrollbars=no'; if(w) tmp[tmp.length] = 'width=' + w; if(h) tmp[tmp.length] = 'height=' + h; return window.open(url, fname, tmp.join(',')); } //////////////////////////////////////////////////////////// // getWinSize(window) function getWinSize(win) { if(!win) win = window; var obj = getBody(win); return { width: win.innerWidth || parseInt(obj.clientWidth), height: win.innerHeight || parseInt(obj.clientHeight) }; } //////////////////////////////////////////////////////////// // strict oder quirks Mode. function getBody(w) { return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ? w.document.documentElement : w.document.body || null; }