ciao a tutti!
Ecco la galleria di foto completa!
un frame contiene le thumbnails, l'altro contiene l'immagine visualizzata e dei tasti avanti e indietro per navigare tra le immagini(sotto i tasti avanti e indietro ci sono le thumbnails relative all'immagine successiva e precedente)
inoltre c'è la possibilità di scegliere un'immagine a caso, lo slideshow...
questa pagina contiene i 2 frame:
<frameset cols="*,110" border="0">
<frame name="main" src="main.htm" scrolling="auto" frameborder="0"> <frame name="thumbnails" src="thumbnails.htm" scrolling="auto" frameborder="0">
</frameset>
main.htm - questa pagina contiene le thumbnails:
[B]<html>
<head>
<title>th</title>
<script language="JavaScript1.1" src="foto_arrey.js">
</script>
</head>
<body>
<script language="JavaScript">
/* CJSPA - carlaccio js photo album - carlaccio.too.it */
numfoto = foto.length;
for (var i=0; i<numfoto; i++)
{document.write("<a href=\"#jscpa\" onClick=\"parent.main.document.images['intro'].src = '" + foto[i] + "'\"><img src=\"" + thumb[i] + "\" alt=\"" + foto[i] + "\" border=\"0\" width=\"65\" height=\"48\"></a>
" );}
</script>
</body>
</html> [/B]
thumbnails.htm - questa è la pagina principale dove si vedono le immagini:
<html>
<head>
<title>main</title>
<script language="JavaScript1.1" src="foto_arrey.js"></script>
</head>
<body topmargin="5">
<center>
[img]foto01.jpg[/img]</center>
<center>
<script language="JavaScript1.1">
var which=0
function indietro(){
if (which>0){
window.status='<<indietro'
which--
document.images.intro.src=foto[which]
}
else window.status='Prima immagine'
}
function avanti(){
if (which<foto.length-1){
window.status='avanti>>'
which++
document.images.intro.src=foto[which]
}
else window.status='Fine delle immagini'
}
function corrente(){
document.images.intro.src=foto[which]
window.status='immagine corrente'
}
window.setInterval("imcorrente()",1000);
function imcorrente(){
if(which>0)
document.images.imm1.src=thumb[which-1];
else
document.images.imm1.src="noimg.gif";
if(which>=0)
document.images.imm2.src=thumb[which];
if(which<foto.length-1)
document.images.imm3.src=thumb[which+1];
else
document.images.imm3.src="noimg.gif";
}
function slideshow(){
slid = setInterval("avanti()",4000);}
function ferma()
{clearInterval(slid)}
function acaso()
{var randomimg=Math.floor(Math.random()*foto.length);
document.images[0].src=foto[randomimg];
which=randomimg; }
window.setInterval('questaimg()',700);
function questaimg(){
document.forms[0].nimg.value = "foto " + (which+1) + " di " + foto.length;
}
</script>
<center><table border="0" cellspacing="0"><tr>
<td align="center" valign="top">
<a href="javascript:indietro()"><<indietro
[img]noimg.gif[/img]</a>
</td>
<td align="center" valign="top">
<a href="javascript:corrente()">corrente
[img]noimg.gif[/img]</a>
</td>
<td align="center" valign="top">
<a href="javascript:avanti()">avanti>>
[img]noimg.gif[/img]</a></td></tr></table></center>
<center><form>
slideshow: avvia -
ferma -
riavvolgi -
ultima foto -
foto a caso
<input size=10 name=nimg value="foto">
</form></center>
</center>
</body>
</html>
questo è, invece, il contenuto del file foto_arrey.js che richiamato dalle due pagine thumbnails.htm e main.htm
foto = new Array("foto01.jpg","foto02.jpg","foto03.jpg");
thumb = new Array("th_foto01.jpg","th_foto02.jpg","th_foto03.j pg");
esempio
ciao ciao


Rispondi quotando