Printable View
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:
http://i34.tinypic.com/2n6z1bs.png
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
Hai già un codice?
No purtroppo, non saprei da dove iniziare, ho soltando degli esempi da altri siti web che per spoiler non vorrei citare... :???:
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:
Ora ti spiego come funziona: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>
Tu inserisci qui al posto di "immagine-standar.jpg"
Un immagine che verrà visualizzata quando non è stata richiesta alcuna anteprima da parte della thumbnail.Codice HTML:<img id="imggrande" src="immagine-standar.jpg" alt="" />
Per aggiungere una thumbnail basta che aggiungi
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.Codice HTML:<a href="javascript:Anteprima('006.jpg')"><img src="miniatura_006.jpg" alt="" /></a>
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 :mrgreen:)
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 :=D: Ciao A Presto