Tutorial Plugin JQuery #2, defilement horizontal : Scrollable

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 !

Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , , , , . Vous pouvez le mettre en favoris avec ce permalien.

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

  1. Ping : Portfolio webdesign : Peter Pearson | arnaud-k, développement web, design, geekeries

  2. cosinus dit :

    bon travail, mais ton menu ne marche pas comme il faut sous ie !
    il y a des espaces entre les items de menu.
    je cherche depuis quelques jours une solution mais je ne suis pas doué en css.
    j’attends un fix alors..
    Bon courage

  3. STC/HMD dit :

    Super ! mais j’ai trouvé un petit défaut ,a la fin de la galerie(tout a droite) il y a un espace , alors je l’ai rempli avec des photos du debut afin que le nombre total de photo soit egal a un multiple du nombre d’élément a afficher (size) et la ça marche !!!
    A+++
    STC

  4. STC/HMD dit :

    Oui en fait j’arrive pas a me débarrasser de l’espace blanc en fin de galerie !!

  5. STC/HMD dit :

    C’est encore moi ,j’ai trouvé la solution au problème cela venait du fait qu’après mon dernier élément il y avait des espaces entre le et le (de ) car j’ai fait un copier collé ..
    A+++

  6. Ping : » Mise en ligne d’Agenda Culturel v3, en version Beta // JQuery, PHP, html, design… // arnaud-k : un blog de geek

  7. Ping : » Un slider pour JQuery : Easy Slider // JQuery, PHP, html, design… // arnaud-k : un blog de geek

  8. niabal dit :

    comment faire pour faire défiler non pas 1 bloc mais les 3 blocs suivants. On lit les 3 premiers et, encliquant sur suivant il faudrait que 3 suivants viennent s’afficher.

    Autre chose, si je voudrais le faire en vertical.. possible?? ou c’est tout différent??

    Merci

  9. Gérard Ramia dit :

    Bonjour. je suis débutant et je me suis mis en tête de créer une galerie de photos avec vignettes (différente de l’image agrandie juste en dessous de mon carroussel). Mon problème : jusque là tout va bien, mais j’aimerais :
    > un caroussel qui ne soit pas en boucle mais juste une sccession de vignettes, avec flèches cliquables à gauche et droite au cas où le nombre de vignettes dépasse la largeur de la page,
    > que la vignette présentement active soit à gauche systématiquement et non au centre comme c’est le cas (j’utilise jquery exposure),
    > qu’il n’y ait pas d’action du curseur sur la vignette (donc je ne peux pas cliquer la vignette), cependant l’effet estompage des vignettes non actives me plaît beaucoup, donc à garder…
    Bref, vous l’aurez compris, je cherche à faire « simple », mais… pourtant j’ai passé des nuits à farfouiller les codes dans tous les sens et à tester diverses valeurs sans succès (à moins que par exemple, il ne faille pas mettre « center » ou « middle » mais « -2 » – du fait qu’il y a 2 vignettes à gauche de celle active???) Je ne sais plus comment faire. Je vous remercie infiniment d’avoir jeté un oeil sur mon problème, et bonne continuation.
    Si avec tout ça, vous pouviez m’envoyer la réponse à mon mail ce serait vraiment great !!! j’ai déjà du mal à m’y retrouver dans tous ces sites. Mais j’apprends…. Encore merci.

  10. metis15 dit :

    Béééé… la démo ne marche pas du tout pour moi.
    FireFox, sur PC XPfam, tout à jour.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *