/*
© Struppi
Mail:
struebig@gmx.net
URL:
http://javascript.jstruebig.de/source/popup.html
letzte Änderung: 21.11.05
Beschreibung:
-------------
Ein Skript um ein Fenster in der Größe eines Bildes öffnen.
Einbinden:
----------
<script src="popup.js"></script>
<A HREF="grosses_bild.jpg" target="bild"
onclick="return showBild(this, 'name_des_Bildes');"
><IMG SRC="kleines_bild.jpg"></A>
*/
///////////////////////////////////////////////////////////
// showBild(a, name) - die Hauptfunktion.
function showBild(a)
{
if(!a.target) a.target = "BildFenster";
var default_width = 400;
var default_height = 200;
if( showBild.popup_close == 'blur' || !showFenster || showFenster.closed != false)
showFenster = popUp('', a.target, default_width, default_height);
showFenster.document.open();
showFenster.document.write( getHTML(a.href, a.title || a.alt) );
showFenster.document.close();
showFenster.focus();
var img = new Image;
img.ready = false;
img.onload = function() { fitWin(this, showFenster); };
img.src = a.href;
if(img.complete) fitWin(img, showFenster);
return false;
}
///////////////////////////////////////////////////////////
// Globale Definitionen
showBild.popup_bgColor = '#f00';
showBild.popup_color = '#ff0';
showBild.rahmen = '1px solid black';
showBild.abstand_w = 0;
showBild.abstand_h = 0;
showBild.center_popup = true;
showBild.popup_close = 'click'; // Mögliche Werte: 'blur', 'click', ''
showBild.max_x = screen.width - 100;
showBild.max_y = screen.height - 100;
///////////////////////////////////////////////////////////
// fitWin(Image, window) - wird aus dem Popup aufgerufen.
function fitWin(i, win)
{
if(i.ready) return;
i.ready = i.width > 0;
var w_s = getWinSize(win);
var r = 2 * parseInt(showBild.rahmen);
var w = i.width > showBild.max_x ? showBild.max_x : i.width;
var h = i.height > showBild.max_y ? showBild.max_y : i.height;
win.resizeBy(
(w - w_s.width + ( 2 * showBild.abstand_w) + r),
(h - w_s.height + ( 2 * showBild.abstand_h) + r)
);
if(showBild.center_popup && !window.opera)
{
w_s = getWinSize(win);
win.moveTo(( screen.width - w_s.width) / 2, (screen.height - w_s.height) / 2 );
}
win.focus();
}
/////////////////////////////////////////////////////////////////////
// getHTML(bild, titel, farbe)
function getHTML(src, title, bgcolor, color)
{
if(!title) title = 'kein Titel';
if(!bgcolor) bgcolor = showBild.popup_bgColor;
if(!color) color = showBild.popup_color;
var NL = "\n";
var text = '<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/strict.dtd">\n'
+ '<HTML>\n<HEAD>' + NL
+ '<TITLE>' + title + '<\/TITLE>' + NL
+ '<STYLE type="text/css">' + NL
+ 'body{margin:0;padding:0;' + NL
+ 'background-color:' + bgcolor + ';' + NL
+ 'overflow:hidden;' + NL
+ 'color:' + color + ';}' + NL
+ 'img{padding:0;'
+ (showBild.rahmen ? 'border:' + showBild.rahmen + ';' : '')
+ 'margin:' + showBild.abstand_h +'px,'
+ showBild.abstand_w +'px;' + NL
+ '}\n' + NL
+ '<\/STYLE>' + NL
+ '<\/HEAD>' + NL
+ '<body'
+ (showBild.popup_close.toLowerCase() == 'blur' ? ' onblur="self.close();"' : '')
+ '>'
+ '<img galleryimg="no" src="' + src + '" alt="" title="' + title + '"'
+ '>' + NL
+ (showBild.popup_close.toLowerCase() == 'click' ? '<script> document.images[0].onclick=function(){window.close()};</script>' : '')
+ '<\/body><\/html>'
;
return text;
}
/////////////////////////////////////////////////////////////////////
// Ein popup öffnen
function popUp(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 s = new Object();
if(typeof win.innerWidth != 'undefined')
{
s.width = win.innerWidth;
s.height = win.innerHeight;
}
else
{
var obj = getBody(win);
s.width = parseInt(obj.clientWidth);
s.height = parseInt(obj.clientHeight);
}
return s;
}
////////////////////////////////////////////////////////////
// Der IE hat 2 verschiedene Objekte für den strict und quirks Mode.
function getBody(w)
{
return (w.document.compatMode && w.document.compatMode == "CSS1Compat") ? w.document.documentElement : w.document.body || null;
}
var showFenster = null;
/////////////////////////////////////////////////////////////////////
// ... und am schluss alle Fenster schliessen.
window.onunload = function ()
{
if(showFenster && !showFenster.closed) showFenster.close();
}
Lesezeichen