Scarica l'articolo in formato PDF

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.
Griglia di navigazione realizzata in jQuery

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]