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 !

Sur le même sujet (en théorie ) :

tags catégorie : JQuery

8 commentaires :

  1. Portfolio webdesign : Peter Pearson | arnaud-k, développement web, design, geekeries dit :
    10 avril 2009 à 13:27

    [...] L’utilisation de JQuery avec un plugin du même type que celui permettant de faire défiler (présenté précédemment), mais utilisé sur toute la page. Avec, en plus un effet d’apparition sur les lignes (sur la [...]

  2. cosinus dit :
    24 mai 2009 à 01:03

    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 :
    9 juillet 2009 à 09:07

    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 :
    9 juillet 2009 à 09:31

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

  5. STC/HMD dit :
    9 juillet 2009 à 09:51

    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. » Mise en ligne d’Agenda Culturel v3, en version Beta // JQuery, PHP, html, design… // arnaud-k : un blog de geek dit :
    6 août 2009 à 18:22

    [...] JQuery comme framework JavaScript, et tu peux retrouver certains plugins décrit sur ce blog : Scrollable, JQuery Delay, JQuery UI… J’ai également utilisé les API de Youtube et [...]

  7. » Un slider pour JQuery : Easy Slider // JQuery, PHP, html, design… // arnaud-k : un blog de geek dit :
    10 août 2009 à 11:12

    [...] plugin JQuery est donc une bonne alternative au plugin Scrollable, il est notamment plus simple à mettre en place et à configurer mais il reste un peu moins souple [...]

  8. niabal dit :
    11 octobre 2009 à 08:14

    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

Ajouter un commentaire