Carrousel sous Mootools

**luxojr** · 01/06/2012, 11h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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; }

**vermine** · 01/06/2012, 12h02

Bonjour,

En fait, ce sera plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

class="maClasse"

**luxojr** · 01/06/2012, 12h30

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.

**vermine** · 01/06/2012, 13h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
// Slide 1
itemsSelector: $('SlideItMoo_outer1').getElements('.SlideItMoo_element'),
 
// Slide 2
itemsSelector: $('SlideItMoo_outer2').getElements('.SlideItMoo_element'),

**luxojr** · 01/06/2012, 15h05

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é.

**vermine** · 01/06/2012, 15h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

#SlideItMoo_outer {...}

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Carrousel sous Mootools

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager