Réutilisation d'animation

Version imprimable

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 :mrgreen: )

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:

http://img11.hostingpics.net/pics/86...magebitmap.png
=> 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 :calim2: 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 :)

21/10/2011, 08h26
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". :?
23/10/2011, 13h12
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
23/10/2011, 22h20
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.

Argh c'est triste :cry:

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