JS SLIDE SHOW - Album photo

[ Home ] [ JavaScript che io uso ] [ CSS i riferimenti che uso ] [ HTML i riferimenti utili ]

Album di foto o immagini

Esempio?? clicca qui

Questo javascript permette di visualizzare in sequenza automatica o manuale delle immagini.
Le immagini visualizzate possono essere ingrandite o ridotte dalla dimensione originale.

Con Netscape (almeno fino alla versione 4.7) tutte le proprieta' dell'immagine height width alt ecc... sono di sola lettura.
L'unica che viene letta e scritta e' src l'url dell'immagine.
Passando da un'immagine all'altra viene solo accettata la prorieta' src - l'url, mentre tutti gli altri valori rimangono dalla prima immagine visualizzata

Questo e' anche il limite di questo script che funziona correttamente solo con Explorer oppure Opera che leggono e scrivono tutte le proprietà dell'immagine

Forse in una prossima versione sistemero' le cose anche per Netscape

Per aggiornare l'album con le proprie immagini e' sufficente modificare, togliere o aggiungere i valori passati alla funzione

//**** aggiungi togli immagini addImg("alt","url");

addImg("le mie immagini...........","http://web.tiscalinet.it/marioq/images/valley_album.gif");
addImg("Commento immagine","URL Immagine);

Sotto metto il codice html e javascript. dell'intera pagina
Copia ed incolla in un nuovo file.

<html> <head> <META NAME="AUTHOR" CONTENT="mario.q@falco.mi.it"> <title>JS Album photo</title> </head> <body onload="javascript:tot_size()"> <form name=info> <input type="text" name="size" size="55" value=" ATTENDI CARICAMENTO IN CORSO"><br><br> <input type=text name=alt size=70><br> <input type=text name=valore size=70><br> <input type=text name=img_url size=70> <table border="0" cellpadding="5" cellspacing="0"> <tr><td align=right><b>Magnification</b></td> <td><input type="text" name="ingrandimento" size="3" value=1 maxlength="3"></td> <td align=right><b>Image Size<BR>(Pixels)</b></td> <td><input type="text" name="img_size" size="11"></td> </tr> </table> <input type="button" value="+1 second >>" name="rotazioneOkPiu" onclick="rotazione_immagini()"> <input type="text" name="tempo_rotazione" size="3" value="0"> <input type="button" value="<< -1 second" name="rotazioneOkMeno" onclick="rotazione_decrementa()"> <input type="button" value="STOP" name="stop" ONCLICK="rotazione_stop()"> </form> <form> <TABLE BORDER=0 cellpadding="0" cellspacing="0" align="left"> <TR><TD> <input type="button" value=">>" name="avanti" ONCLICK="javascript:passa_piu('foto','foto_ok')"></TD></TR> <TR><TD> <input type="button" value="<<" name="indietro" ONCLICK="javascript:passa_meno('foto','foto_ok')"></TD></TR> <TR><TD> <input type="button" value="##" name="tutte" ONCLICK="javascript:show_all()"></TD></TR> </TABLE></form> <img name="foto" src="http://web.tiscalinet.it/marioq/images/valley_album.gif" alt="album images" border="" hspace="5"> <br clear="all"> <hr noshade size="1"> <div id="qui_tutte"> button [##] show-hide album<br></div> <hr noshade size="1"> <script> var isIE = 0; document.all ? isIE=true : alert("This page is designed for IE only!\n\nQuesta pagina viene visualizzata\nsolo con InternetExplore"); if (document.layers) browserVer = 2; if (isIE) { var myImgs = new Array(); function addImg(_d,_l) { var _x = myImgs.length?myImgs.length:0; myImgs[_x] = new Image(); myImgs[_x].src = _l; myImgs[_x].alt = _d; } //**** aggiungi togli immagini addImg("alt","url"); addImg("le mie immagini...........","http://web.tiscalinet.it/marioq/images/valley_album.gif"); addImg("una tranquilla vallata dove riposarsi","http://web.tiscalinet.it/marioq/images/valley.gif"); addImg("Lisa con il suo sorriso...","http://web.tiscalinet.it/marioq/images/monna.gif"); addImg("L\'emozione di questi colpi di pennello.....","http://web.tiscalinet.it/marioq/images/vincent.gif"); addImg("Non e\' la mia casa","http://web.tiscalinet.it/marioq/images/backgrnd.gif"); addImg("Una grande citta","http://web.tiscalinet.it/marioq/images/city.gif"); addImg(" CALTAVUTURO\n IL mio paese......\n ma io vivo a Brusuglio-MILANO","http://web.tiscalinet.it/marioq/images/calta.jpg"); addImg("un animale domestico","http://www.photography.com/02.na.jpg"); addImg("Il mito.......","http://web.tiscalinet.it/marioq/images/pokemon2.gif"); addImg("Da usare per un\'email sicura","http://web.tiscalinet.it/marioq/images/francobollo4.gif"); addImg("0339026778 la babysitter da chiamare per tenere i bambini","http://web.tiscalinet.it/marioq/images/babysitter.gif"); addImg("Una barchetta, una spiaggia, una......","http://www.photography.com/12.sport.jpg"); addImg("un colpo di luce tra le nuvole","http://www.photography.com/contest3pic.jpg"); addImg("Il tramonto","http://www.photography.com/contest4pic.jpg"); } var picShown=0; function passa_piu() {picShown=(++picShown)%myImgs.length;updateInfo();} function passa_meno(){picShown=(--picShown+myImgs.length)%myImgs.length;updateInfo();} function updateInfo() { if (isIE){ document.images.foto.src = myImgs[picShown].src; src_ok=document.images.foto.src; height_ok=(document.images.foto.height = myImgs[picShown].height); document.images.foto.height = myImgs[picShown].height*document.info.ingrandimento.value; width_ok=(document.images.foto.width = myImgs[picShown].width); document.images.foto.width = myImgs[picShown].width*document.info.ingrandimento.value; document.images.foto.alt = myImgs[picShown].alt; fileSize_ok=myImgs[picShown].fileSize; document.info.alt.value = myImgs[picShown].alt; document.info.valore.value = width_ok+' x '+height_ok+' pixel --- '+myImgs[picShown].fileSize+' bytes --- '+ Math.ceil(myImgs[picShown].fileSize/1024)+' Kb'; document.info.img_url.value ="N° "+picShown+" - "+myImgs[picShown].src; document.info.img_size.value = document.images.foto.width+' x '+document.images.foto.height; } } resetta=0; function show_all(){ if (resetta==0){ for(_i=0 ; myImgs.length >_i; ++_i) { tutte_ok = new Array(); tutte_ok[_i] = "<nobr>"+_i+"=>"+ "<img name=img_"+_i+" src="+myImgs[_i].src+" "+ " alt=\""+myImgs[_i].alt+"\""+ " hspace=5 vspace=5 align=middle>"+ "<\/nobr>"; qui_tutte.innerHTML+=tutte_ok[_i]; } resetta=1; } else{ qui_tutte.innerHTML=" "+ "button [##] show-hide album<br>" resetta=0; } } valore=document.info.tempo_rotazione.value rotazione_piu=1; avvio_piu=0; function rotazione_immagini(){ if (avvio_piu==1){ clearInterval(interval_piu); avvio_piu=0; valore=document.info.tempo_rotazione.value; } if (rotazione_piu==1 && valore>=0){ valore = ++valore; document.info.tempo_rotazione.value=valore; tempo=valore*1000; avvio_piu = 1 interval_piu=setInterval('passa_piu()',tempo) } else if(rotazione_piu==0 && valore>0){ valore=--valore; document.info.tempo_rotazione.value = valore; tempo=valore*1000; avvio_piu = 1 interval_piu=setInterval('passa_piu()',tempo) } } function rotazione_decrementa(){ if (avvio_piu==1 && document.info.tempo_rotazione.value>=1){ clearInterval(interval_piu); avvio_piu=1; rotazione_piu=0; rotazione_immagini(); } else (avvio_piu==1 && document.info.tempo_rotazione.value==0);{ valore=0;rotazione_piu=1; } } function rotazione_stop(){ avvio_piu==1 ? clearInterval(interval_piu):avvio_piu=0 document.info.tempo_rotazione.value=0; valore=document.info.tempo_rotazione.value; rotazione_piu=1; } function tot_size(){ totImgSize=0; for(tot=0; tot<myImgs.length; ++tot){ if (!myImgs[tot].complete==false){ totImgSize+= +(myImgs[tot].fileSize); } } document.info.size.value="N°"+tot+" images -- total size album="+totImgSize+" bytes # Kb="+Math.ceil(totImgSize/1024); } </script> </body> </html>

Esempio?? clicca qui

Questo JavaScript e' stato da me scritto con la collaborazione di Mike Robb

Ciao
Mario