Lo script che presentiamo permette di creare una galleria fotografica utilizzando DHTML. Tutte le immagini verranno aperte, nel formato originale, in un DIV all'interno della pagina. Sarà anche possibile utilizzare dei link testuali e non delle thumbnails per aprire le foto. La compatibilità è prevista con Explorer 5.x e Netscape 6.x.
- esempio.htm
- 01.gif
- 02.gif
- 03.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo alcuni fogli di stile tra i tag <head> della pagina:
<style type="text/css">
#showimage{
position:absolute;
visibility:hidden;
border: 1px solid #333333;
}
#dragbar{
cursor: hand;
cursor: pointer;
background-color: #006699;
min-width: 100px;
}
#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
color: white;
font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
}
</style>
Modificando i valori presenti nel CSS potremo personalizzare al meglio i colori del DIV
Sempre tra i tag <head> della pagina inseriamo il codice javascript che ci permetterà di realizzare l'effetto:
<script type="text/javascript">
var ie=document.all
var ns6=document.getElementById&&!document.all
function ietruebody(){
return (document.compatMode!="BackCompat")? document.documentElement :
document.body
}
function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") :
document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerwidth/2-imgwidth/2 :
ietruebody().scrollLeft+ietruebody().clientwidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerheight/2-imgheight/2 :
pgyoffset+ietruebody().clientheight/2-imgheight/2
if (window.opera && window.innerheight)
vertpos=pgyoffset+window.innerheight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"
crossobj.innerHTML='<div align="right" id="dragbar"><span
id="closetext" onClick="closepreview()" style="cursor: pointer; cursor:hand;">Chiudi</span> </div><img src="'+which+'"/>'
crossobj.style.visibility="visible"
return false
}
else
return true
}
function closepreview(){
crossobj.style.visibility="hidden"
}
function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}
function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script>
Questo codice non richiede alcuna modifica.
Subito dopo il tag <body>, inseriamo questa seplice riga:
<div id="showimage"></div>
A questo punto non resta che inserire, nel punto della pagina che preferiamo, le thumbnails che richiameranno lo script mostrando le immagini nel formato originale.
<a href="IMMAGINE.EST" onClick="return enlarge('IMMAGINE.EST',event)"><img src="THUMBNAIL.EST" border="0"/></a>
Come si può notare, la stringa è molto semplice da personalizzare:
IMMAGINE.EST
indica il nome completo (e l'eventuale percorso) dell'immagine in formato originale
THUMBNAIL.EST
indica il nome completo (e l'eventuale percorso) dell'immagine in formato ridotto
Se invece preferiamo creare un link testuale, per visualizzare l'immagine in formato originale, basterà quanto segue:
<a href="IMMAGINE.EST" onClick="return enlarge('IMMAGINE.EST',event)">Clicca</a>
Altre modifiche non sono necessarie.
