Thumbnails sind eine gute Sache. Platzsparend werden halbwegs übersichtlich und komfortabel kleine Vorschaubildchen gezeigt, die beim Anklicken ganz groß raus kommen. Mit ein wenig Javascript kann man das noch attraktiver gestalten.
Das hier vorgestellte und beschriebene Javascript öffnet die Bilder in einem simulierten Fenster mit Titelleiste und Schließen-Option. Aber sehen Sie selbst: Live Beispiel im neuen Fenster
Das StyleSheet sowie das Javascript gehören in den <head>-Bereich der HTML-Seite.
<style type="text/css">
#zeigedasbild{
position:absolute;
visibility:hidden;
border: 1px solid black;
}
#leiste{
cursor: hand;
cursor: pointer;
background-color: #ffffef;
min-width: 100px;
}
#leiste #schliessen_text{
font-weight: bold;
font-family: Arial;
font-size: 13px;
margin-right: 1px;
}
a { font-family: Arial; font-size: 13px; }
</style>
Die Javascript-Eigenschaft compatMode erlaubt, den aktuellen Darstellungs-Modus zu erfragen. Im Quirks-Mode liefert document.compatMode den Wert BackCompat oder Quirks-Mode. Der Internet Explorer 6+, Mozilla 1, Netscape und Opera ab Version 7 kennen diese Eigenschaft. Alle anderen Browser liefern als Wert undefined. Mozilla unterscheidet hierbei nicht zwischen Standards-Mode und dem eigenen Almost Standards Mode.
<script type="text/javascript">
var ie=document.all
var ns6=document.getElementById&&!document.all
function ieobjekt(){
return (document.compatMode && document.compatMode!="BackCompat" &&
!window.opera)? document.documentElement : document.body
}
Mit dem Klick auf das Thumbnail oder den Link wird die Funktion "vergroessern" ausgelöst, worüber die Information gegeben wird, welches Bild verlangt wurde. Falls kein aktueller Browser genutzt wird, landet das Bild einfach in einem neuen Browser-Fenster. Ansonsten wird das Bild im simulierten Fenster angezeigt, wobei noch unterschieden wird, ob das Bild zentriert oder am Mauszeiger geöffnet werden soll. Die Wahl wird mit dem Link entschieden, wie weiter unten zu lesen ist.
function vergroessern(welche, e, position, imgwidth, imgheight){
if (ie||ns6){
aufbau=document.getElementById? document.getElementById("zeigedasbild") :
document.all.zeigedasbild
if (position=="center"){
seite_y_stellung=ns6? parseInt(pageYOffset) : parseInt(ieobjekt().scrollTop)
horizoposi=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ieobjekt().scrollLeft+ieobjekt().clientWidth/2-imgwidth/2
vertiposi=ns6? seite_y_stellung+window.innerHeight/2-imgheight/2 : seite_y_stellung+ieobjekt().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight)
vertiposi=seite_y_stellung+window.innerHeight/2-imgheight/2
vertiposi=Math.max(seite_y_stellung, vertiposi)
}
else{
var horizoposi=ns6? pageXOffset+e.clientX : ieobjekt().scrollLeft+event.clientX
var vertiposi=ns6? pageYOffset+e.clientY : ieobjekt().scrollTop+event.clientY
}
Der folgende Bereich beschreibt den Aufbau des Fensters mit dem gewünschten Bild.
aufbau.style.left=horizoposi+"px"
aufbau.style.top=vertiposi+"px"
aufbau.innerHTML='<div align="right" id="leiste"><span id="schliessen_text"
onClick="vorschau_zu()">Schließen</span> </div><img
src="'+welche+'">'
aufbau.style.visibility="visible"
return false
}
else
return true
}
Wird das Bild groß dargestellt, benötigt man auch einen Schließmechanismus. Man möchte ja die Übersicht der Bildergalerie erhalten. Mit dem Link "Schließen" wird dazu die folgende Funktion "vorschau_zu" ausgelöst, womit der ganze Aufbau zurück genommen wird.
function vorschau_zu(){
aufbau.style.visibility="hidden"
}
Die Funktion "drag_and_drop" macht genau das, was der Name verspricht: Sie sorgt für die Beweglichkeit des simulierten Fensters.
function drag_and_drop(e){
if (ie&&dragapproved){
aufbau.style.left=tempx+event.clientX-offsetx+"px"
aufbau.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
aufbau.style.left=tempx+e.clientX-offsetx+"px"
aufbau.style.top=tempy+e.clientY-offsety+"px"
}
return false
}
function initiiere_drag(e){
if (ie&&event.srcElement.id=="leiste"||ns6&&e.target.id=="leiste"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(aufbau.style.left)
tempy=parseInt(aufbau.style.top)
dragapproved=true
document.onmousemove=drag_and_drop
}
}
document.onmousedown=initiiere_drag
document.onmouseup=new Function("dragapproved=false")
</script>
Das "DIV"-Tag wird genutzt, um das gewünschte Bild aufzunehmen. Mit dem Link wird "onclick" die Funktion "vergroessern" ausgelöst und die Information mitgegeben, welches Bild es denn sein darf.
<div id="zeigedasbild"></div>
<a href="bild-gr.jpg" onClick="return vergroessern('bild-gr.jpg',event)"><img
src="bild-kl.jpg" border="0"></a>
<a href="bild-gr2.jpg" onClick="return vergroessern('bild-gr2.jpg',event)"><img
src="bild-kl2.jpg" border="0"></a>
<br><br>
<a href="schnecke.jpg" onClick="return vergroessern('schnecke.jpg',event,'center',300,375)">
Schnecke (zentriert)</a>
Eine Vorschau in eine größere Version verwandeln, kann mit Hilfe von Javascript ein Erlebnis werden. Zumindest aber eine Alternative zum Öffnen im neuen Browser-Fenster.
