JQuery, PHP, html, design... // arnaud-k : un blog de geek » scrollable http://blog.arnaud-k.fr Le blog JQuery, Html, Web Design Thu, 21 Apr 2011 08:10:17 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Tutorial Plugin JQuery #2, défilement horizontal : Scrollable http://blog.arnaud-k.fr/2009/04/07/tutorial-plugin-jquery-defilement-horizontal-scrollable/ http://blog.arnaud-k.fr/2009/04/07/tutorial-plugin-jquery-defilement-horizontal-scrollable/#comments Tue, 07 Apr 2009 10:23:20 +0000 arnaud http://blog.arnaud-k.fr/?p=122

Lire la suite >>

]]>

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 !

Pas encore de billet sur le même sujet !

]]> http://blog.arnaud-k.fr/2009/04/07/tutorial-plugin-jquery-defilement-horizontal-scrollable/feed/ 10