slide show 2000
sia automatico che comandato manualmente
(funziona anche in locale, cioè si possono aprire le pagine con un browser in locale)
1) preparare le foto:2) praparare la cartella inserendo:
- ruotare le foto con JPEG Lossless Rotator (gratuito)
- ridimensionare le foto con Easy Thumbnails (non è necessario perché saranno ridimensionate automaticamente)
3) lanciare foto.asp
- default.htm (vedi sotto)
- foto.asp (per generare la stringa Javascrit per la proiezione in sequenza)
- slideshow.js
- la cartella icone
- eventualmente icona.ico
4) modificare default.asp mettendo:
- l'elenco delle foto generato da foto.asp in var ImagesSrc = new Array(
- la prima foto in id="pagina" src="
- il titolo della pagina (al posto di slide show) e il titolo dentro la pagina (al posto di colori)
prova questo slideshow: colori
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta content="IE=10.000" http-equiv="X-UA-Compatible"> <title>slide showi</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width" /> <link rel="shortcut icon" href="icona.ico"> <link rel="apple-touch-icon image_src" href="icona.ico"> <script type="text/javascript" language="JavaScript"><!-- var ImagesSrc = new Array("PICT0006.JPG","PICT0007.JPG","PICT0009.JPG","PICT000a.JPG","PICT000b.JPG","PICT000c.JPG","PICT000d.JPG","PICT000e.JPG","PICT000f.JPG","PICT0010.JPG","PICT0011.JPG","PICT00110.JPG","PICT0013.JPG","PICT0014.JPG","PICT0016.JPG","PICT0017.JPG","PICT0020.JPG","PICT0022.JPG","PICT0023.JPG","PICT0023a.JPG","PICT0024.JPG","PICT0025.JPG","PICT0026.JPG","PICT0027.JPG","PICT0028a.JPG","PICT0035.JPG","PICT0036.JPG","PICT0037.JPG","PICT0038.JPG","PICT0109.JPG","PICT0111.JPG","PICT0114.JPG","PICT0116.JPG","PICT0120.JPG","PICT0122.JPG","PICT0123.JPG","PICT0001.JPG","PICT0002.JPG","PICT0003.JPG"); --> </script> <script language="JavaScript" type="text/javascript" src="slideshow.js"></script> <style type=text/css> body { margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; font-family: verdana, arial; color: tomato; background-color: black; } /* --------------- immagini fluide ----------------- */ /* img { max-width: 100%; margin: 0px; border: 0px; padding: 0px; } */ /* -------- setting max-height and width in vh(viewport height) and vw(viewport width) units. -------- */ img:not(.icona){ max-width: 100vw; height:auto; width:auto; max-height:98vh; border: 0px solid red; } </style> </head> <body> <center> <table border=0 width=100%><tr><td id="foto" align=middle> <a href="javascript:DisplayNextImage(3)"><img align=middle id="pagina" src="PICT0122.JPG"></a></td> <td align=right valign=top> <table border=0><tr><td align=right valign=top> <font size=3><b>colori <span id="numero">apro...</span> </b></font><p> <img class="icona" onclick="javascript:ShowImage(1)" src="icone/avanti.gif" width="30" title="avanti"><br/> <img class="icona" onclick="javascript:ShowImage(-1)" src="icone/indietro.gif" width="30" title="indietro"><br/> <img class="icona" onclick="javascript:ShowImage(2)" src="icone/ultima.gif" width="30" title="ultima"><br/> <img class="icona" onclick="javascript:ShowImage(-2)" src="icone/prima.gif" width="30" title="prima"><br/> <a href=..><img class="icona" src="icone/indice.gif" width="30" title="indice" border=0></a><br/> <p> </td></tr></table> </td></tr></table> <!-- embed src=musica.mp3 autostart=true loop=true --> <bgsound src=musica.mp3 loop=infinite></body></html>