Bonjour a tous je suis en train de réaliser en js un système de présentation de projets.

Voici le résultat d’où j'en suis actuellement.

http://notre-monde.com/decapsuleuses.com/test

l'idée est de cliquer sur une miniature et d'afficher sous la ligne de miniature le projet en question.
Cela fonctionne comme je le souhaite pour le moment mise a part une chose.

J'aimerai avoir la possibilité d'avoir un lien suivant et un lien précédent qui me permettrait de switcher d'un projet en avant ou d'un projet en arrière.

Pouvez vous m'aider a réaliser cela ??

Ça fait quelque jours que j'essaye en vain.

Merci par avance.

Voici mon code html
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
 
<div id="test">
    	<div class="liens-ref">
        	<div>
            	<a href="" class="nom1">projet 1</a>
 
            	<a href="" class="nom2">projet 2</a>
 
            	<a href="" class="nom3">projet 3</a>
            </div>
            <div>
            	<a href="" class="nom4">projet 4</a>
 
            	<a href="" class="nom5">projet 5</a>
 
            	<a href="" class="nom6">projet 6</a>
            </div>
            <div>
            	<a href="" class="nom7">projet 7</a>
 
            	<a href="" class="nom8">projet 8</a>
 
            	<a href="" class="nom9">projet 9</a>
            </div>
        </div>
 
        <div class="content-ref">
        	<div class="ref" id="nom1">
            	reference 1
            </div>
 
            <div class="ref" id="nom2">
            	reference 2
            </div>
 
            <div class="ref" id="nom3">
            	reference 3
            </div>
 
            <div class="ref" id="nom4">
            	reference 4
            </div>
 
            <div class="ref" id="nom5">
            	reference 5
            </div>
 
            <div class="ref" id="nom6">
            	reference 6
            </div>
 
            <div class="ref" id="nom7">
            	reference 7
            </div>
 
            <div class="ref" id="nom8">
            	reference 8
            </div>
 
            <div class="ref" id="nom9">
            	reference 9
            </div>
        </div>
	</div>
et mon code javascript

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
 
$('document').ready(function(){
 
	$('#test .liens-ref a').live('click',function(e){
		e.preventDefault();
		var dataLink = $(this).attr('class');
		$('.prout').remove();	
 
		if($('#'+dataLink).size()){
			var copyRef = $('#'+dataLink).clone();
			$this = $(this).parent();
			copyRef.appendTo($this).addClass('prout').slideDown(500);
		}
	});
 
});
je vou pose egalment le css pour ceux qui veulent tester en local

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
 
/*test*/
 
#test .liens-ref div{
	overflow:hidden;
}
 
#test .liens-ref a{
	display:block;
	float:left;
	background-color:#CCC;
	width:278px;
	height:200px;
	margin:0 15px 20px 0;
}
 
#test .ref{
	display:none;
	clear:both;
	background-color:#fff;
	height:400px;
	width:864px;
	margin-bottom:20px;
}