Slideshow con Thumbnail

24-11-2008, 22.12.41

Salve a tutti, ho un problema a creare un Slideshow abbastanza semplice con delle Thumbnail, ho fatto una immaggine a riguardo per capire cosa intendo:

Ecco come ben vedete io vorrei fare in modo che al Click sulla Thumbnail 1/2(ecc) si visualizza l`img piú ingrandita(della Thumbnail) sul rettangolo "A".
Grazie Mille

**miki92** · 24-11-2008, 22.16.40

Hai già un codice?

24-11-2008, 22.32.51

No purtroppo, non saprei da dove iniziare, ho soltando degli esempi da altri siti web che per spoiler non vorrei citare...

**miki92** · 24-11-2008, 22.50.42

Beh quindi tu chiedi di crearti il codice da 0? Non credo che ci siano molti disposti ad aiutarti da 0...prova a cercare su internet qualche script che faccia ciò perchè ce ne sono di vari.

EDIT:
Ti ho creato questo codice al momento, naturalmente poi le personalizzazioni toccano a te:

Codice HTML:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Senza nome 1</title>
<script type="text/javascript">
function Anteprima(file){
document.getElementById('imggrande').src = file;
}
</script>
</head>

<body>
<center><img id="imggrande" src="immagine-standar.jpg" alt="" /></center><br /><br />
<a href="javascript:Anteprima('001.jpg')"><img src="miniatura_001.jpg" alt="" /></a>
<a href="javascript:Anteprima('002.jpg')"><img src="miniatura_002.jpg" alt="" /></a>
<a href="javascript:Anteprima('003.jpg')"><img src="miniatura_003.jpg" alt="" /></a>
<a href="javascript:Anteprima('004.jpg')"><img src="miniatura_004.jpg" alt="" /></a>
<a href="javascript:Anteprima('005.jpg')"><img src="miniatura_005.jpg" alt="" /></a>
<a href="javascript:Anteprima('006.jpg')"><img src="miniatura_006.jpg" alt="" /></a>
</body>

</html>

Ora ti spiego come funziona:

Tu inserisci qui al posto di "immagine-standar.jpg"

Codice HTML:

<img id="imggrande" src="immagine-standar.jpg" alt="" />

Un immagine che verrà visualizzata quando non è stata richiesta alcuna anteprima da parte della thumbnail.
Per aggiungere una thumbnail basta che aggiungi

Codice HTML:

<a href="javascript:Anteprima('006.jpg')"><img src="miniatura_006.jpg" alt="" /></a>

E modifichi 006.jpg con l'immagine grande (quindi la foto in dimensioni reali) e miniatura_006.jpg con la thumbnail dell'immagine che hai inserito precedentemente nella stessa riga.

Cosa fa il codice?

Il codice che ho creato fa in modo, sfruttando javascript, che quando un utente clicca su una thumbnail al posto dell'immagine grande (quindi quella standard) compare l'immagine in versione originale di quella cliccata.

Ho creato il codice perchè non ho nulla da fare e perchè ho voluto aiutarti, se qualche cosa non ti è chiara o non hai capito o il codice non funziona scrivi pure ed al più presto ti rispondo.

» Demo On-line per mostrarti il funzionamento (Non far caso alle immagini ho preso le prime che mi sono capitate sotto mano

)

24-11-2008, 23.10.51

Sei stato molto gentile ^^, certo io non volevo che mi facessi uno script da 0, magari un aiuto nel crearlo visto il mio lungo riposo nell`ambito javascript, comunque sei stato gentile da farlmelo tu stesso, il codice funziona perfettamente ti ringrazio ancora

Ciao A Presto

Discussione: Slideshow con Thumbnail

LinkBack

Strumenti discussione

Display

Slideshow con Thumbnail

Regole di scrittura