Réutilisation d'animation [Résolu]

[misterkiller]

Bonjour, bonsoir à tout ceux qui me liront

Ca fait plusieurs jours que je suis en train de travailler sur un site internet et à force de vouloir chercher des nouvelles technologies sur le net, je suis tomber sur Mootools.
Il me permet d'ajouter des effets sur mon site qui peuvent en mettre plein la vue ( surtout que je suis toujours étudiant )

Mais voilà, dans tout apprentissage, on rencontre des problèmes et je ne trouve pas vraiment comment faire en sorte de réutiliser mon code correctement.

Le problème doit surement résider dans le script:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
	window.addEvent('domready', function(){
		var nS4 = new noobSlide({
			box: $('box4'),
			items: $$('#box4 div'),
			size: 480,
			handles: $$('#handles4 span'),
			onWalk: function(currentItem,currentHandle){
				$('info4').set('html',currentItem.getFirst().innerHTML);
				this.handles.removeClass('active');
				currentHandle.addClass('active');
			}
		});
	});
</script>

Mon code HTML étant des plus simple est celui que j'aimerai réutiliser plusieurs fois dans la même page.

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
<h2>Sample 4</h2>
<div class="sample">
	<div class="mask3">
		<div id="box4">
 
			<div>
				<h3>1. Lorem ipsum dolor sit amet</h3>
				<img src="img1.jpg" alt="Photo" />
			</div>
 
			<div>
				<h3>2. Nullam porttitor tortor et sem</h3>
				<img src="img2.jpg" alt="Photo" />
			</div>
 
			<div>
				<h3>3. Aenean consectetuer nibh sedt</h3>
				<img src="img3.jpg" alt="Photo" />
			</div>
		</div>
	</div>
	<h4>Show: <span id="info4"></span></h4>
	<p class="buttons" id="handles4">
		<span>1. Uno</span>
		<span>2. Dos</span>
		<span>3. Tres</span>
	</p>
</div>

J'ai beau chercher via mon amis google, je ne trouve pas de réponse à ma question.

Un petit screenshot pour que ça soit plus simple à vous expliquer:


=> Le menu défilant du bas ne fonctionne pas au contraire du 1er...

Je n'ai pas l'habitude des forums pour demander de l'aide, d'ailleurs c'est la première fois j'arrive généralement à trouver tout seul mais l'inspiration me manque, donc j'en viens à vous

Pouvez vous m'aider à me mettre sur la voie pour réussir ce que je désire faire ?

Merci d'avance à tout ceux qui m'aideront et à bientôt

[vermine]

Bonjour,

Dans l'exemple qui ne marche pas, on remarque que le "1. Uno" n'est pas "actif". On pourrait supposer qu'en fait vous n'obtenez aucun "currentItem".

[misterkiller]

Merci tout d'abord pour ta réponse
Sinon je ne vois pas comment rendre le currentItem actif je ne m'y connais pas trop et c'est la première fois que je joue avec ce type de script.
De plus, il n'y a pas beaucoup de documentation..

Tu as des exemples similaire qui pourrait m'aider ?

Merci encore et bonne journée,

Cédric

[NoSmoking]

Bonsoir,
il te faut créer autant de new noobSlide que tu as de slide dans ta page, tu ne peux pas y échapper.

[misterkiller]

Argh c'est triste

Enfin merci beaucoup j'y suis arrivé.

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
 
<script type="text/javascript">
	window.addEvent('domready', function(){
		var nS4 = new noobSlide({
			box: $('box4'),
			items: $$('#box4 div'),
			size: 480,
			handles: $$('#handles4 span'),
			onWalk: function(currentItem,currentHandle){
				$('info4').set('html',currentItem.getFirst().innerHTML);
				this.handles.removeClass('active');
				currentHandle.addClass('active');
			}
		});
		var nS5 = new noobSlide({
            box: $('box5'),
            items: $$('#box5 div'),
            size: 480,
            handles: $$('#handles5 span'),
            onWalk: function(currentItem,currentHandle){
                $('info5').set('html',currentItem.getFirst().innerHTML);
                this.handles.removeClass('active');
                currentHandle.addClass('active');
            }
        });
	});
</script>

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
 
<body>
<div id="cont">
<h2>Sample 4</h2>
<div class="sample">
	<div class="mask3">
		<div id="box4">
 
			<div>
				<h3>1. Lorem ipsum dolor sit amet</h3>
				<img src="img1.jpg" alt="Photo" />
			</div>
 
			<div>
				<h3>2. Nullam porttitor tortor et sem</h3>
				<img src="img2.jpg" alt="Photo" />
			</div>
 
			<div>
				<h3>3. Aenean consectetuer nibh sedt</h3>
				<img src="img3.jpg" alt="Photo" />
			</div>
		</div>
	</div>
	<h4>Show: <span id="info4"></span></h4>
	<p class="buttons" id="handles4">
		<span>1. Uno</span>
		<span>2. Dos</span>
		<span>3. Tres</span>
	</p>
</div>
	<h2>Sample 5</h2>
	<div class="sample">
		<div class="mask3">
			<div id="box5">
 
				<div>
					<h3>1. Lorem ipsum dolor sit amet</h3>
					<img src="img1.jpg" alt="Photo" />
				</div>
 
				<div>
					<h3>2. Nullam porttitor tortor et sem</h3>
					<img src="img2.jpg" alt="Photo" />
				</div>
 
				<div>
					<h3>3. Aenean consectetuer nibh sedt</h3>
					<img src="img3.jpg" alt="Photo" />
				</div>
			</div>
		</div>
		<h4>Show: <span id="info5"></span></h4>
		<p class="buttons" id="handles5">
			<span>1. Uno</span>
			<span>2. Dos</span>
			<span>3. Tres</span>
		</p>
	</div>
</div>
</body>

Merci encore pour vos réponses, c'est toujours agréable de ne pas se sentir seul quand on est perdu ^^

Bonne journée à vous et à bientôt