Thumba è una galleria in jQuery, che mostra le miniature come le immagini di Google. È possibile spostarsi muovendo il mouse o utilizzando i cursori della tastiera “sinistra” e “destra”.
Basta poi premere il tasto “Invio” o fare clic su una miniatura per aprirla in una lightbox.
Per prima cosa includi la libreria jQuery e i CSS
|
1 2 3 4 5 6 7 |
<!-- include CSS & JS files --> <!-- CSS file --> <link rel="stylesheet" type="text/css" href="Thumba.jquery.css" media="screen" /> <!-- jQuery files --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="Thumba.jquery.min.js"></script> |
Codice HTML
|
1 |
<!-- First, write your HTML --> <div> <ul> <li> <!-- add "thumba_default" class to the link for initializing Thumba plugin !! --> <a href="images/big/picasso1.jpg" title="Legend of the image"> <img src="images/thumbs/picasso1.jpg" alt="image1" /> </a> </li> <li> <a href="images/big/picasso1.jpg" title="Legend of the image"> <img src="images/thumbs/picasso1.jpg" alt="image2" /> </a> </li> ... ... </ul> </div> |
Infine richiama il plugin Thumba
|
1 |
<script type="text/javascript"> $(document).ready(function(){ // simple Thumba plugin called $('.ThumbaGallery').Thumba(); // more complex Thumba plugin called $('.ThumbaGallery').Thumba({ effectThumba : 'linear', keyNav : false, coeffZoom : 3 }); }); </script> |
Info | Sito Web | Autore Demo Download
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
