Ciao a tutti, ho realizzato una semplice gallery in JQuery visualizzabile qui http://www.fiumicinocomune.com/prova...a_gallery.html
Il codice della pagina è questo
e il Css associato questocodice:<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Prova Gallery</title> <link href="css/stile_gallery.css" rel="stylesheet" type="text/css" /> </script> </head> <div id="gallery"> <div id="panel"> [img]images/image_01_large.jpg[/img] </div> <div id="thumbs"> [img]images/image_01_thumb.jpg[/img] [img]images/image_02_thumb.jpg[/img] [img]images/image_03_thumb.jpg[/img] </div> </div> <script> $('#thumbs').delegate('img','click', function(){ $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large')); $('#description').html($(this).attr('alt')); }); </script> </body> </html>
#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
border: 0px solid gray;
padding: 0px;
background-color: white;
cursor: pointer;
}
#thumbs img {
float: left;
margin-right: 0px;
}
Quello che vorrei fare è semplice: fare in modo che sul click ci sia un effetto fade. Come faccio per inserirlo nel codice?
Vorrei anche dare un rollover ai bottoni, sostituendoli con una immagine diversa.
Grazie in anticipo