Oggi ti propongo un altro ottimo lavoro realizzato dai ragazzi di tympanus. Si tratta di una bellissima griglia di navigazione realizzata con jQuery in cui potrai inserire delle immagini o comunque del contenuto che preferisci.
Grid Navigation – Download immediato da qui.
Quello che colpisce è sicuramente la semplicità con cui può essere personalizzata e i numerosi effetti che si possono ottenere in base alle nostre preferenze.
Vediamo come utilizzarla:
Prima di tutto dobbiamo assicurarci di importare correttamente tutto il necessario (nello .zip troverai tutto), facendo attenzione ad inserire i percorsi corretti.
1 2 3 4 5 6 7 8 | <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/gridNavigation.css" /> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.gridnav.js"></script> |
Il codice Html è di estrema semplicità, avremo una struttura a lista in cui andremo a specificare il contenuto, nel nostro caso immagini.
Codice Html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div class="tj_wrapper"> <ul class="tj_gallery"> <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li> <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li> <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li> <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li> <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li> <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li> <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li> <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li> <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li> <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li> <li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li> <li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li> <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li> <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li> <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li> <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li> <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li> <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li> <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li> <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li> </ul> </div> |
Codice CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | /* Thumbnail Effects Style */ .tj_container{ width:800px; height:400px; position:relative; margin:30px auto; } .tj_nav{ position:absolute; right:-80px; top:50%; margin-top:-35px; height:70px; width:39px; } .tj_nav span{ width:39px; height:25px; background:transparent url(../images/prev.png) no-repeat top left; position:absolute; top:0px; left:0px; text-indent:-9000px; opacity:0.7; cursor:pointer; /*-webkit-transition: all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -transition: all 0.2s ease-in-out;*/ } .tj_nav span.tj_next{ background-image:url(../images/next.png); top:auto; bottom:0px; left:0px; } .tj_nav span:hover{ opacity:1.0; } .tj_wrapper{ width:100%; height:100%; position:relative; margin:0px auto; } .tj_wrapper ul li{ float:left; } .tj_wrapper ul li a{ outline:none; display:block; margin:5px; background:transparent url(../images/bg_thumb.jpg) no-repeat center center; } .tj_wrapper ul li a img{ display:block; border:none; opacity:0.7; -moz-box-shadow:2px 2px 4px #8e8e8e; -webkit-box-shadow:2px 2px 4px #8e8e8e; box-shadow:2px 2px 4px #8e8e8e; /*-webkit-transition: all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -transition: all 0.2s ease-in-out;*/ } .tj_wrapper ul li a img:hover{ opacity:1.0; } /* Specific style for the examples */ .example10 .tj_container{ height:600px; } |
Andremo poi a richiamare lo script jQuery con il seguente codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> $(function() { $('#tj_container').gridnav({ type : { mode : 'seqfade', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows speed : 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows easing : '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows factor : 100, // for seqfade, sequpdown, rows reverse : '' // for sequpdown } }); }); </script> |
Inoltre possiamo specificare anche i seguenti parametri per personalizzare ulteriormente:
- rows: il numero di righe da visualizzare nella griglia.
- navL / navR: per visualizzare i selettori per i prossimi elementi di navigazione e i precedenti.
Sicuramente troverai una combinazione di effetto / durata che ti lascierà soddisfatto.
Puoi visualizzare una demo con un anteprima degli effetti direttamente da qui.
Download esempio da qui.
Ti piace questa griglia? Non dimenticare di condividere l’articolo con i tuoi amici!
[adsense]
4 Maggio 2012 il 22:22
Salve ho un problema con la galleria. Ho un menu quindi dei tag li. pur associando bene il css la galleria prende il css del menu!!quindi mi sballa tutto 🙁
4 Maggio 2012 il 22:31
Ciao, basta che assegni una classe agli li del menu e risolvi il problema
6 Maggio 2012 il 10:54
Intanto grazie della risposta, ma intendi i li del menù vero e proprio o i li della gallery?
6 Maggio 2012 il 11:44
Se lo fai sul menu vero é proprio sicuramente devi cabiare meno cose… Ma non é impotante su cosa lo fai, é importante che distingui gli li…
6 Maggio 2012 il 11:48
Per farti capire meglio ti linko il sito http://www.jeanmathieu.com/home.html
Il sito è basato su uno slide orizzontale (non so se possa essere un problema questo). Se clicchi collection e poi man ti va alla sezione incriminata 😉 Magari capisci meglio cosa intendo cosi.
6 Maggio 2012 il 15:58
Un aiutino?:(
23 Febbraio 2013 il 15:00
Ciao Daniele,
la galleria è molto bella, complimenti. Ma vorrei farti una domanda.
Ci sarebbe secondo te la possibilità di inserire un altro tasto che vada alla prima riga della galleria qualunque si la tua riga attuale? Una sorta di torna su per intenderci.
Grazie in anticipo.
7 Marzo 2013 il 15:12
Certo, si può fare modificando o meglio creando una nuova funzione jQuery
19 Marzo 2013 il 11:59
Sapresti darmi qualche suggerimento per favore?