Ho trovato in rete il seguente codice:
| SLIDESHOW AVANZATO |
-------------------------
- SCHEDA TECNICA -
GENERE: immagini
DESCRIZIONE: slideshow avanzato con comandi
COMPATIBILITA': Explorer 5.x, Netscape 6.x
USO FILE ESTERNI: no
FILE ALLEGATO: "jscript_260503.zip"
- DESCRIZIONE -
Lo script di questa settimana offre uno slideshow molto completo: sarà possibile scorrere le immagini tramite un comodo menù a tendina oppure con dei classici bottoni; sarà inoltre possibile scegliere la modalità di visualizzazione random. Infine, per ogni fotografia, verrà mostrata la data e la descrizione.
Il codice è compatibile con Microsoft Explorer 5.x e Netscape 6.x mentre non funziona correttamente con Navigator 4.x.
Il file allegato a questa mail "jscript_260503.zip" si compone di 2 file (esclusi i file "htmlit.gif" e "jscript_260503.txt"):
esempio.htm
cartella IMG
Per una piu' 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 peculiarita' di questo Javascript.
>>>>>>>>>>>>>>>> esempio.htm <<<<<<<<<<<<<<<<<<
Inseriamo il codice javascript tra i tag <head> della pagina:
---------------------------------------------------------------
<script Language="Javascript">
<!--
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
current = 0;
PicVar = 0;
PicVal = new Array();
TitVal = new Array();
DatVal = new Array();
TxtVal = new Array();
PicVal[PicVar] = "img/foto1.jpg";
TitVal[PicVar] = "La luna nera!";
DatVal[PicVar] = "26/05/2006";
TxtVal[PicVar++] = "Questa è la luna vista dalla mia navicella spaziale!";
PicVal[PicVar] = "img/foto2.jpg";
TitVal[PicVar] = "La luna";
DatVal[PicVar] = "24/05/2006";
TxtVal[PicVar++] = "Altra foto della luna";
PicVal[PicVar] = "img/foto3.jpg";
TitVal[PicVar] = "Il sole";
DatVal[PicVar] = "24/05/2006";
TxtVal[PicVar++] = "Il sole nascosto dalle nuvole";
function Show_foto(newpic) {
if(isDOM)document.getElementById("_foto").src = PicVal[newpic];
else if(isIE) document._foto.src = PicVal[newpic];
document.form_foto.testo_foto.value=TxtVal[newpic];
document.form_foto.data_foto.value=DatVal[newpic];
SelectionBox = document.form_foto.menudrop;
SelectionBox.options[newpic].selected = true;
current = newpic;
}
function Random_foto() {
TotalImages = document.form_foto.menudrop.options.length;
current = Math.floor(Math.random()*TotalImages);
Show_foto(current);
}
function Previous_foto() {
TotalImages = document.form_foto.menudrop.options.length;
current--;
if(current<0) current = TotalImages - 1;
Show_foto(current);
}
function Next_foto() {
TotalImages = document.form_foto.menudrop.options.length;
current++;
if (current>=TotalImages) current = 0;
Show_foto(current);
}
// -->
</script>
---------------------------------------------------------------
La personalizzazione è estremamente semplice. Per ogni foto dovremo creare 4 array contenenti rispettivamente:
- il percorso che porta alla foto
- il nome da dare alla foto
- la data della foto
- la descrizione della foto
Al contrario di quanto siamo abituati a fare, questi array non andranno numerati ma basterà semplicemente duplicarli in base al numero di foto che vogliamo inserire.
Ecco un esempio per una sola foto:
PicVal[PicVar] = "FOTO.JPG";
TitVal[PicVar] = "NOME_FOTO";
DatVal[PicVar] = "DATA";
TxtVal[PicVar++] = "DESCRIZIONE";
Per aggiungere altre immagini basterà copiare le quattro righe appena viste e personalizzare il contenuto.
A questo punto, nel corpo della pagina, inseriamo la tabella contenente il form per scorrere le immagini:
---------------------------------------------------------------
<table border=0 width=100% cellpadding=0 cellspacing=0>
<FORM NAME="form_foto">
<tr align=center>
<td height=30>
<input type=button value=".: Precedente :." onClick="Previous_foto();" class="bottoni">
<input type=button value=".: Prossima :." onClick="Next_foto();" class="bottoni">
<input type=button value=".: Random :." onClick="Random_foto();" class="bottoni">
</td></tr>
<tr align=center><td height=30>
<script language=javascript>
<!--
TotalImages = PicVar;
document.write("<SELECT class='tendina' name='menudrop' onChange='Show_foto(form_foto.menudrop.options.selectedIndex);'>");
for (loop=0; loop < TotalImages; loop++)
{
document.write("<option value=" + PicVal[loop] + ">" + TitVal[loop] + "</option>");
}
-->
</script>
</td></tr>
<tr align=center>
<td>
<IMG border=1 id="_foto" NAME="_foto" SRC="img/foto1.jpg" height="200" width="200">
</td>
</tr>
<tr align=center>
<td height=30>
<input type=text name="data_foto" value="26/05/2003" size=18 onFocus="this.blur()" class="tendina">
</td></tr>
<tr align=center><td height=90>
<TEXTAREA name="testo_foto" ROWS=5 COLS=45 WRAP="no" onFocus="this.blur()"
class="tendina">
Seleziona una delle foto dal menù a tendina
</TEXTAREA>
</td>
</tr>
</FORM>
</table>
---------------------------------------------------------------
Questo codice non richiede grosse modifiche, se non a livello estetico. L'unica cosa, molto importante, a cui stare attenti è non cambiare l'attributo "name" agli elementi del form.
Mi riferisco, in particolare, a :
<FORM NAME="form_foto">
<input type=text name="data_foto" value="xxxxx" size=18>
<TEXTAREA name="testo_foto" ROWS=5 COLS=45 WRAP="no">xxxx</TEXTAREA>
Una volta personalizzata esteticamente la pagina dovremo impostare la prima immagine da caricare. Solitamente questa foto è la stessa impostata nel primo array del codice javascript. Quindi:
---------------------------------------------------------------
<IMG border=1 id="_foto" NAME="_foto" SRC="img/foto1.jpg" height="200" width="200">
---------------------------------------------------------------
Questa foto, a cui non va cambiato l'attributo id, imposta le dimensioni anche per le immagini successive (in questo caso 200 x 200).
Se volete visualizzare il numero complessivo di foto presenti nel vostro slideshow basterà incollare questa stringa a fondo pagina:
---------------------------------------------------------------
<SCRIPT Language="Javascript">document.write("<font face='verdana'>L'album contiene " + PicVar + " foto</font>");</script>
---------------------------------------------------------------
e vorrei sapere come posso modificarlo per ottenere in ogni immagine una pop-up.
Se qualcuno lo sa mifaccia sapere.
grazie
| SLIDESHOW AVANZATO |
-------------------------
- SCHEDA TECNICA -
GENERE: immagini
DESCRIZIONE: slideshow avanzato con comandi
COMPATIBILITA': Explorer 5.x, Netscape 6.x
USO FILE ESTERNI: no
FILE ALLEGATO: "jscript_260503.zip"
- DESCRIZIONE -
Lo script di questa settimana offre uno slideshow molto completo: sarà possibile scorrere le immagini tramite un comodo menù a tendina oppure con dei classici bottoni; sarà inoltre possibile scegliere la modalità di visualizzazione random. Infine, per ogni fotografia, verrà mostrata la data e la descrizione.
Il codice è compatibile con Microsoft Explorer 5.x e Netscape 6.x mentre non funziona correttamente con Navigator 4.x.
Il file allegato a questa mail "jscript_260503.zip" si compone di 2 file (esclusi i file "htmlit.gif" e "jscript_260503.txt"):
esempio.htm
cartella IMG
Per una piu' 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 peculiarita' di questo Javascript.
>>>>>>>>>>>>>>>> esempio.htm <<<<<<<<<<<<<<<<<<
Inseriamo il codice javascript tra i tag <head> della pagina:
---------------------------------------------------------------
<script Language="Javascript">
<!--
var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
current = 0;
PicVar = 0;
PicVal = new Array();
TitVal = new Array();
DatVal = new Array();
TxtVal = new Array();
PicVal[PicVar] = "img/foto1.jpg";
TitVal[PicVar] = "La luna nera!";
DatVal[PicVar] = "26/05/2006";
TxtVal[PicVar++] = "Questa è la luna vista dalla mia navicella spaziale!";
PicVal[PicVar] = "img/foto2.jpg";
TitVal[PicVar] = "La luna";
DatVal[PicVar] = "24/05/2006";
TxtVal[PicVar++] = "Altra foto della luna";
PicVal[PicVar] = "img/foto3.jpg";
TitVal[PicVar] = "Il sole";
DatVal[PicVar] = "24/05/2006";
TxtVal[PicVar++] = "Il sole nascosto dalle nuvole";
function Show_foto(newpic) {
if(isDOM)document.getElementById("_foto").src = PicVal[newpic];
else if(isIE) document._foto.src = PicVal[newpic];
document.form_foto.testo_foto.value=TxtVal[newpic];
document.form_foto.data_foto.value=DatVal[newpic];
SelectionBox = document.form_foto.menudrop;
SelectionBox.options[newpic].selected = true;
current = newpic;
}
function Random_foto() {
TotalImages = document.form_foto.menudrop.options.length;
current = Math.floor(Math.random()*TotalImages);
Show_foto(current);
}
function Previous_foto() {
TotalImages = document.form_foto.menudrop.options.length;
current--;
if(current<0) current = TotalImages - 1;
Show_foto(current);
}
function Next_foto() {
TotalImages = document.form_foto.menudrop.options.length;
current++;
if (current>=TotalImages) current = 0;
Show_foto(current);
}
// -->
</script>
---------------------------------------------------------------
La personalizzazione è estremamente semplice. Per ogni foto dovremo creare 4 array contenenti rispettivamente:
- il percorso che porta alla foto
- il nome da dare alla foto
- la data della foto
- la descrizione della foto
Al contrario di quanto siamo abituati a fare, questi array non andranno numerati ma basterà semplicemente duplicarli in base al numero di foto che vogliamo inserire.
Ecco un esempio per una sola foto:
PicVal[PicVar] = "FOTO.JPG";
TitVal[PicVar] = "NOME_FOTO";
DatVal[PicVar] = "DATA";
TxtVal[PicVar++] = "DESCRIZIONE";
Per aggiungere altre immagini basterà copiare le quattro righe appena viste e personalizzare il contenuto.
A questo punto, nel corpo della pagina, inseriamo la tabella contenente il form per scorrere le immagini:
---------------------------------------------------------------
<table border=0 width=100% cellpadding=0 cellspacing=0>
<FORM NAME="form_foto">
<tr align=center>
<td height=30>
<input type=button value=".: Precedente :." onClick="Previous_foto();" class="bottoni">
<input type=button value=".: Prossima :." onClick="Next_foto();" class="bottoni">
<input type=button value=".: Random :." onClick="Random_foto();" class="bottoni">
</td></tr>
<tr align=center><td height=30>
<script language=javascript>
<!--
TotalImages = PicVar;
document.write("<SELECT class='tendina' name='menudrop' onChange='Show_foto(form_foto.menudrop.options.selectedIndex);'>");
for (loop=0; loop < TotalImages; loop++)
{
document.write("<option value=" + PicVal[loop] + ">" + TitVal[loop] + "</option>");
}
-->
</script>
</td></tr>
<tr align=center>
<td>
<IMG border=1 id="_foto" NAME="_foto" SRC="img/foto1.jpg" height="200" width="200">
</td>
</tr>
<tr align=center>
<td height=30>
<input type=text name="data_foto" value="26/05/2003" size=18 onFocus="this.blur()" class="tendina">
</td></tr>
<tr align=center><td height=90>
<TEXTAREA name="testo_foto" ROWS=5 COLS=45 WRAP="no" onFocus="this.blur()"
class="tendina">
Seleziona una delle foto dal menù a tendina
</TEXTAREA>
</td>
</tr>
</FORM>
</table>
---------------------------------------------------------------
Questo codice non richiede grosse modifiche, se non a livello estetico. L'unica cosa, molto importante, a cui stare attenti è non cambiare l'attributo "name" agli elementi del form.
Mi riferisco, in particolare, a :
<FORM NAME="form_foto">
<input type=text name="data_foto" value="xxxxx" size=18>
<TEXTAREA name="testo_foto" ROWS=5 COLS=45 WRAP="no">xxxx</TEXTAREA>
Una volta personalizzata esteticamente la pagina dovremo impostare la prima immagine da caricare. Solitamente questa foto è la stessa impostata nel primo array del codice javascript. Quindi:
---------------------------------------------------------------
<IMG border=1 id="_foto" NAME="_foto" SRC="img/foto1.jpg" height="200" width="200">
---------------------------------------------------------------
Questa foto, a cui non va cambiato l'attributo id, imposta le dimensioni anche per le immagini successive (in questo caso 200 x 200).
Se volete visualizzare il numero complessivo di foto presenti nel vostro slideshow basterà incollare questa stringa a fondo pagina:
---------------------------------------------------------------
<SCRIPT Language="Javascript">document.write("<font face='verdana'>L'album contiene " + PicVar + " foto</font>");</script>
---------------------------------------------------------------
e vorrei sapere come posso modificarlo per ottenere in ogni immagine una pop-up.
Se qualcuno lo sa mifaccia sapere.
grazie
