8

Tutorial Plugin JQuery #2, défilement horizontal : Scrollable

le 7 avril 2009

tags tags : , , , ,

Toujours dans mes recherches de plugins pour JQuery (pour un projet perso cette fois-ci), je suis tombé sur ce bon plugin : Scrollable.

Plugin JQuery, défilement horizontal avec Scrollable

Plugin assez aisé à mettre en place, mais il faut avoir quelques connaissances en CSS pour optimiser au mieux l’utilisation du plugin.

plugin JQuery Scrollable

Comme pour tous les plugins JQuery, il faut d’abord charger le framework JQuery avec de charger les fichiers du plugins : 

1
2
3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>	
<script type="text/javascript" src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://static.flowplayer.org/js/jquery.scrollable-1.0.2.min.js"></script>

jquery.mousewheel.js permet d’ajouter le contrôle du défilement horizontal grâce à la molette de la souris oou à l’aide des flèches gauche et droite du clavier.

Ensuite, il faut initialiser le plugin (à insérer dans votre fichier JavaScript perso ou dans la page html entre les balises et , ajouter avant le code ) :

1
2
3
4
5
6
7
8
9
10

$(document).ready( function () {
		// initialisation du plugin de defilement
		$("div.scrollable").scrollable({
			size: 3,
			items: '#thumbs',  
			hoverClass: 'hover',
			next: 'div.next', 
			prev: 'div.prev' 
		});	
});

Dans mon exemple, j’initialise le plugin avec quelques paramètres personnalisés : size définit le nombre d’éléments à afficher simultanément, hoverClass permet d’ajouter une classe (qui sera définie dans la feuille de style de la page) au survol de l’élément, next et prev correspondent aux liens de navigation pour faire avance ou reculer le défilement.

Après, il faut prévoir l’affichage du contenu (html) qui va être défilé (le nombre d’éléments total sera aussi défini ici) :

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

<!-- conteneur -->
<div class="scrollable">
 
	<div id="thumbs">
 
			<!-- chaque element est contenu dans un bloc de type div -->
			<div>
				<img src="photosExemples/mini/3.jpg" alt="image 1" />
 
				<h3><em>1. </em>An example title</h3>
 
 
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
					tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
				</p>				
			</div>
 
		        <!-- deuxieme element -->
			<div>
				<img src="photosExemples/mini/4.jpg" alt="image 2" />
 
				<h3><em>2. </em>An example title</h3>
 
				<p>
 
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget 
					tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
				</p>
			</div>
                        [...]
           </div>
</div>

Enfin on peut appliquer des styles css aux éléments :

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
75
76
77
78
79
80
81
82
83
84

/* element parent */
div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 646px;	 
	height:300px;
	float:left;
}
 
/* 
	element parent pour les element a defiler, il faut absolument un grande largeur
*/
#thumbs {	
	position:absolute;
	width:20000em;	
	clear:both;
	border:1px solid #222;
}
 
/* un element seul */
#thumbs div {
	float:left;
	width:214px;
	height:300px;
	background:#333 url(photosExemples/fond.png) repeat-x 0;
	color:#fff;
	border-left:1px solid #333;
	cursor:pointer;
}
 
/* style au survol */
#thumbs div.hover {
	background-color:#444;	
}
 
/* style au survol */
#thumbs div.hover h3 {
	background:#797979 url(photosExemples/fond-h3-hover.png) no-repeat;
}
 
/* style quand un element est cliqué */
#thumbs div.active {
	background-color:#066;
	cursor:default;
}
 
/* styles à personnaliser selon votre contenu */
#thumbs h3, #thumbs p, #thumbs span {
	margin:13px;		
	font-family:"bitstream vera sans";
	font-size:13px;
	color:#fff;
}
 
#thumbs h3 {
	background:#353535 url(photosExemples/fond-h3.png) no-repeat;
	width:100%;
	padding:8px;
	padding-left:35px;
	margin-left:0px;
	margin-top:0px;
}
 
#thumbs h3 em {
	font-style:normal;
	color:#ffa800;
}
 
div.prev {
	color:#ffa800;
	font-size:1.6em;
	font-weight:bold;
	cursor:pointer;
	margin-top:150px;
	float:left;
}
div.next {
	color:#ffa800;
	font-size:1.6em;
	font-weight:bold;
	cursor:pointer;
	margin-top:150px;
	float:left;
}

N’hésite pas à m’envoyer un lien (ou à le mettre dans les commentaires) si tu utilises le plugin grâce à mon (petit) tuto, je n’hésiterai pas à le publier ici !

tags catégorie : JQuery