visualizzatore di immagini con javascript- di Eliana Argenti e Tommaso Bientinesi

VISUALIZZATORE DI IMMAGINI

Innanzitutto vediamo l'effetto proposto: sulla destra abbiamo la lista dei nomi delle immagini: è possibile selezionarne una con il mouse. Al centro compare la miniatura dell'immagine selezionata. Qualora si voglia ingrandire l'immagine basta un clic sulla stessa. In basso a destra c'è un bottone con scritto "Auto". Cliccando sul bottone si ottiene la visualizzazione in automatico delle immagini: queste vengono visualizzate in sequenza con un intervallo di tre secondi una dall'altra; nello stesso tempo sul bottone compare la scritta "Stop". Cliccando sul bottone quando su questo c'è la scritta "Stop" la visualizzazione in automatico cessa ed è possibile visualizzare un'immagine scegliendo fra le opzioni dell'elenco a destra.

IL MIO ALBUM

Baldo, il mio nuovo cucciolo

**IL MIO ALBUM**

`Baldo, il mio nuovo cucciolo`

SPIEGAZIONE SINTETICA

Il programma fa uso di array:

listap: contiene, ordinatamente, i nomi delle miniature complete di URL. Le miniature hanno tutte la stessa dimensione;
lista: contiene, ordinatamente, i nomi degli ingrandimenti, anche questi completi di URL. Siccome gli ingrandimenti sono diversi abbiamo inserito per ognuno anche larghezza ed altezza;
descrizione: contiene, ordinatamente, i commenti che devono essere visualizzati insieme ad ogni immagine;
titolo: contiene, ordinatamente, i titoli da dare alle finestre che si aprono con gli ingrandimenti.

Inoltre sono state introdotte le seguenti variabili:

num: memorizza il numero di immagine attualmente visualizzata;
flag: varia fra 0 ed 1 a seconda che sia attivato il metodo automatico o no.

A destra del visualizzatore i nomi delle immagini sono state inserite in un elenco a discesa di nome"Scelta": per permettere una scelta più facile abbiamo inserito una dimensione (size) = 5.

Le funzioni che abbiamo introdotte:

function Mostra(conta): permette la visualizzazione in sequenza delle miniature. Affinchè possa funzionare è necessario:
- dare un nome alla prima miniatura che viene visualizzata, come nel seguente frammento di codice: <img src="baldo4p.jpg" height=49 width=49 name="immagine">
- dare un nome al paragrafo in cui scrivere i commenti, come nel seguente frammento di codice:<span id="descrivi">Baldo, il mio nuovo cucciolo</span>
function apri(conta): permette la visualizzazione degli ingrandimenti in una finestra pop up. Abbiamo descritto diffusamente il metodo nel trucco numero 40
function automatico(): gestisce la visualizzazione delle miniature in automatico o manuale.
function vai (): viene chiamata se è stata selezionata la modalità automatica. La spieghiamo brevemente.

`function vai () {`	Nome della funzione. La parentesi graffa (obbligatoria) indica l'inizio della funzione.
`if (flag==1) {`	Se la variabile di nome flag=1, cioè se è stata attivata la funzione automatica
`if (document.images) {`	Se il browser gestisce le immagini
`num++`	La variabile num, nella quale è memorizzato il numero della minuatura attualmente visualizzata, viene incrementao di 1 (in modo da visualizzare la miniatura successiva)
`if (num>=listap.length) num=0`	Se abbiamo raggiunto l'ultima immagine si riparte da zero
`Mostra(num)`	Viene chiamata la funzione Mostra(num) che visualizza la diapositiva di posizione num
`document.MioForm1.Scelta.options[num].selected=true`	Nell'elenco a discesa appare selezionata la miniatura attualmente visualizzata
`setTimeout("vai()" ,3000)`	dopo un'attesa di 3000 millisecondi, cioè di 3 secondi, la funzione vai viene nuovamente attivata, ed il ciclo riprende
`}`	Parentesi di chiusura della if document.images
`}`	Parentesi di chiusura della if flag=1
`}`	Parentesi di chiusura della funzione

Se l'album ti piace

Abbiamo preparato l'album perfettamente funzionante non in linea per fare delle prove, completo di immagini. Lo puoi personalizzare sostituendo le tue immagini e cambiandone le dimensioni, come pure il colore di sfondo della tabella ed i vari commenti.
Download
Dimensione:152 Kb.