Carrousel sous Mootools

Version imprimable

Bonjour à toutes et à tous,
Comme le titre l'indique, j'ai besoin de trois carrousel de défilement d'images sur ma page.
J'ai trouvé le carrousel qu'il me faut, je l'ai adapté avec les css, il tourne sous Mootools.
Ce que je pense faire, c'est faire trois new SlideItMoo1({.... définition des variables pour le slider1, idem pour le 2 et le 3. Par contre je vais être obligé de dupliquer aussi les CSS le new(.. définit le nom des div de définition des scrollers en dur, est-ce la bonne solution ?

Code:

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SlideItMoo - MooTools 1.2 horizaontal carousel</title>
<link rel="stylesheet" type="text/css" href="stylesheet/horizontal.css" />
 
<script language="javascript" type="text/javascript" src="script/mootools-core-1.3.1-full-nocompat.js"></script>
<script language="javascript" type="text/javascript" src="script/slideitmoo-1.2-mootools-1.3.js"></script>
<script language="javascript" type="text/javascript">
	window.addEvents({
		'domready': function(){
			/* thumbnails example , div containers */
			new SlideItMoo({
						overallContainer: 'SlideItMoo_outer',
						elementScrolled: 'SlideItMoo_inner',
						thumbsContainer: 'SlideItMoo_items',		
						itemsVisible:3,
						elemsSlide:1,
						duration:300,
						itemsSelector: '.SlideItMoo_element',
						itemWidth: 158,
						showControls:1,
						startIndex:5,
						onChange: function(index){
 
						}
 
			});
		}
	});
</script>
</head>
 
<body>
<div class="container">
 
	<!--thumbnails slideshow begin-->
<div id="SlideItMoo_outer">	
		<div class="SlideItMoo_back"><!--slide back button--></div>
        <div id="SlideItMoo_inner">			
			<div id="SlideItMoo_items">
				<div class="SlideItMoo_element">
                    <a href="gallery/full/address_512.jpg" rel="vidbox" title="">
                    	<img src="gallery/thumb/address_128.jpg" /></a>
                    Nam porta tellus ac urna    
            </div>	
				<div class="SlideItMoo_element">
                    <a href="gallery/full/ads_512.jpg" rel="vidbox" title="">
                    	<img src="gallery/thumb/ads_128.jpg" /></a>
                    Praesent pellentesque eros nec nisl    
                </div>
				<div class="SlideItMoo_element">
                    <a href="gallery/full/calendar_512.jpg" rel="vidbox" title="">
                    	<img src="gallery/thumb/calendar_128.jpg" /></a>
                    Vestibulum eleifend scelerisque purus    
                </div>
				<div class="SlideItMoo_element">
                    <a href="gallery/full/comment_512.jpg" rel="vidbox" title="">
                    	<img src="gallery/thumb/comment_128.jpg" /></a>
                    Felis nulla iaculis lacus    
              </div>
				<div class="SlideItMoo_element">
                    <a href="gallery/full/home_512.jpg" rel="vidbox" title="">
                		<img src="gallery/thumb/home_128.jpg" /></a>
                    Quisque neque. Donec quam ante, pulvinar vitae    
              </div>
				<div class="SlideItMoo_element">
                    <a href="gallery/full/mail_512.jpg" rel="vidbox" title="">
                    	<img src="gallery/thumb/mail_128.jpg" /></a>
                    Suspendisse sodales turpis. Aliquam lectus    
                </div>
				<div class="SlideItMoo_element">
                    <a href="gallery/full/news_512.jpg" rel="vidbox" title="">
                    	<img src="gallery/thumb/news_128.jpg" /></a>
                    Praesent pellentesque eros nec nisl    
                </div>
				<div class="SlideItMoo_element">
                    <a href="gallery/full/rss2_512.jpg" rel="vidbox" title="">
                    	<img src="gallery/thumb/rss2_128.jpg" /></a>
                     Nam porta tellus ac urna    
                </div>
				<div class="SlideItMoo_element">
                    <a href="gallery/full/search_512.jpg" rel="vidbox" title="">
                    	<img src="gallery/thumb/search_128.jpg" /></a>
                    Praesent pellentesque eros nec nisl    
                </div>
				<div class="SlideItMoo_element">
                    <a href="gallery/full/sign_512.jpg"rel="vidbox" title="">
                    	<img src="gallery/thumb/sign_128.jpg" /></a>
                    Vestibulum eleifend scelerisque purus    
                </div>				
			</div>			
		</div>
        <div class="SlideItMoo_forward"><!--slide forward button--></div>
	</div>	
 
</div>	
 
</body>
</html>

Code:

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
/* ----------------IMAGE SLIDER------------- */
#SlideItMoo_outer {
	width:510px;
	margin:10px auto 10px;
	display:block;
	position:relative;
	padding:0px 10px 0px;
	background-color: #FFF;
	border: 1px solid #333;
}
/* create custom forward-backward buttons for this container */
#SlideItMoo_outer .SlideItMoo_forward,
#SlideItMoo_outer .SlideItMoo_back{ 
	display:block; 
	position:absolute; 
	cursor:pointer; 
	width:25px; 
	height:200px; 
	bottom:0px; 
	right:5px; 
	background:url(../images/slideitmoo_forward.png) no-repeat center;  
}
#SlideItMoo_outer .SlideItMoo_back { 
	left:5px; 
	background:url(../images/slideitmoo_back.png) no-repeat center;  
}
 
/* the width is set to show the number of thumbnails that will be visible */
#SlideItMoo_inner{ 
	position:relative ; 
	overflow:hidden ; 
	width:474px ; /* set a display width to make the slider look good in case js is disabled */
	margin:0px auto 0px;
	padding:10px 0px 10px;
}
/* the thumbnails container; set a width on it so everything will be fine */
#SlideItMoo_items {
	display:block;
	position:relative;
	font-family: Helvetica, Arial;
}
/* single element design */
#SlideItMoo_items div.SlideItMoo_element {
	display:block;
	position:relative;
	float:left;
	margin:0px 15px 0px;
	font-size:11px;
	width:128px;
	text-align:center;
	color:#666;
	font-family: Helvetica, Arial;
}
#SlideItMoo_items a { padding:0px; margin:3px 0px 3px; clear:both; display:block; background:#333333; padding:2px; }
#SlideItMoo_items a img{ border:none; }

01/06/2012, 12h02
vermine
Bonjour,

En fait, ce sera plutôt :
Code:

1 2 3 4 var slide1 = new SlideItMoo(...); var slide2 = new SlideItMoo(...); var slide3 = new SlideItMoo(...);
Pour les css, définissez une classe et attribuez-la à tous vos slides. :-o

Code:

class="maClasse"
01/06/2012, 12h30
luxojr

Re...
Lors de la création via un 'New(...)', il crée en dur trois id et une classe.
Donc je dois passer tous les id créés en classes. Et transformer les css en classes et non en id.
01/06/2012, 13h14
vermine
Il ne "crée" pas des id et des classes. Il sélectionne des éléments selon leur id ou leur classe.

Dans le HTML, vous aurez effectivement des id différents, et dans les constructeurs vous passerez les bons id.

Dans le CSS, comme vous dites, vous remplacez la définition sur les id par une définition sur des classes.

Attention pour itemsSelector, il passe par une classe. Ce sélecteur doit être différent pour les trois slides. Donc pour ne pas créer trois fois la même classe, vous pouvez sûrement modifier le sélecteur. Par exemple :
Code:

1 2 3 4 5 6 // Slide 1 itemsSelector: $('SlideItMoo_outer1').getElements('.SlideItMoo_element'), // Slide 2 itemsSelector: $('SlideItMoo_outer2').getElements('.SlideItMoo_element'),
01/06/2012, 15h05
luxojr

Re.

Je suis désolé mais quelque chose m'échappe. Dans un premier temps vous dites que dans le HTML, il y aura des id. Dans un second temps vous dites qu'il faut transformer les id par des class dans les CSS.Pour le reste de votre message, je pense avoir compris. Il faut dire que c'est le première fois que je me confronte à Mootools, donc je découvre un peu. Ce n'est pas simple, désolé.

Il y a deux choses bien distinctes : le code JS et le CSS.

Pour la partie JS, le constructeur a besoin de cibler plusieurs éléments :
Code:

1 2 3 4 5 overallContainer: 'SlideItMoo_outer', elementScrolled: 'SlideItMoo_inner', thumbsContainer: 'SlideItMoo_items', ... itemsSelector: '.SlideItMoo_element',
Les trois premiers sont sélectionnés selon leur id. Donc, dans le code HTML, vous devez avoir des éléments avec ces id. Et comme un id doit être unique, chaque élément/chaque slide aura son/ses id (un slide est composé de plusieurs éléments HTML).

Le dernier demande une série d'éléments. L'id ne peut pas être utilisé vu qu'il ne ramènera qu'un seul élément. D'où la proposition du getElements par slide.

Pour la partie CSS, vous avez des styles définis sur des id comme par exemple :

Code:

#SlideItMoo_outer {...}

Vous devez remplacer cela par des styles définis comme des classes :

Code:

.SlideItMoo_outer {...}

Ce qui veut dire, bien entendu, que vos éléments HTML devront avoir cette classe. Par exemple, les champs suivants ont des id différents (chacun utilisé par un constructeur JS) mais la même classe (pour avoir le même style CSS) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12  <div id="SlideItMoo_outer_1" class="SlideItMoo_outer"> ...  <div id="SlideItMoo_outer_2" class="SlideItMoo_outer"> ...  <div id="SlideItMoo_outer_3" class="SlideItMoo_outer"> ...