Ajouter un next et un prev a mon script

Version imprimable

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:

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:

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:

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

14/08/2012, 12h36
orphen

J'ai peut être une idée pour gérer mes liens next et prev même si je n'arrive pas a l'appliquer.

Au clique sur la miniature je creer mes bouton next et prev qui ont pour class la class de la miniature cliquée + 1 sur le bouton suivant et la class de la miniature cliquée -1 sur la class précédente.

Comme ça au clique sur mon liens suivant ou précédent mon script devrai appeler la bonne div.

Qu'en pensez vous?

Pouvez vous m'aider a l'appliquer?

Voici illustrer un exemple illustré

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

- je clique sur la miniature projet 5

- je stock la class du lien cliquer soit: nom5

- Je créer mes lien next et prev avec les class nom6 et nom4.

Merci par avance de votre aide

Re bonjour après une journée de test j'ai réussi a avancer.

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

Maintenant lorsque l'ont clique sur une miniature un lien next et prev apparait dans la div.
Ces liens possèdent comme class les class de la miniature suivante et précédente.

Malheuruesement au clique sur ces liens au lieu de fermer le projet en cours et d'ouvrir le projet suivant ou précédent rien ne se passe..

Pouvez vous me dire ce qui cloche?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $('#test .liens-ref a').live('click',function(e){ e.preventDefault(); var dataLink = $(this).attr('class'); var dataLinkSplit = dataLink.split('nom'); var dataLinkNext = parseInt(dataLinkSplit[1]) + 1; var dataLinkPrev = parseInt(dataLinkSplit[1]) - 1; var switchP = '<ul class="switchProject"><li class="prev"><a href="" class="nom'+dataLinkPrev+'">prev</a></li><li class="next"><a href="" class="nom'+dataLinkNext+'">next</a></li></ul>' $('.prout').remove(); if($('#'+dataLink).size()){ var copyRef = $('#'+dataLink).clone(); $this = $(this).parent(); copyRef.appendTo($this).addClass('prout').slideDown(500,function(){ $(this).append(switchP); }); } });
Pour info ma console javascript ne me remonte aucun bug.

Merci au gens qui essayerons éventuellement de m'aider

16/08/2012, 16h17
orphen

Personne ne peux donc m'aider?

peut être ai-je mal exposé mon soucis?
16/08/2012, 16h34
dkmix

Bonjour,
jquery pocède une fonction prev() et next() surement utile dans votre cas

L'idée de base c'est d'avoir des boutons suivant et precedent qui agissent de la meme facon que le clic sur le projet suivant ou precedent, commencons par decouper le code et laisser la partie creation des boutons a la fonction creer_link()

Code:

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
$('#test .liens-ref a').live('click',function(e){
		e.preventDefault();
		var dataLink = $(this).attr('class');
		if($('#'+dataLink).size()){
			var ligne = $(this).parents('.ligne-ref');
			var switchP = creer_link(dataLink);
			afficher_contenu(ligne, dataLink, switchP);	
		}
	});
});

La fonction qui s'occupe d'afficher le contenu aura comme parametre la ligne ou se trouve le projet, son nom et les boutons suivant/precedent générés

Code:

1
2
3
4
5
6
7
function afficher_contenu(ligne, nom, switchP){
		$('.prout').remove();
		var copyRef = $('#'+nom).clone();
		copyRef.appendTo(ligne).addClass('prout').slideDown(500,function(){
				$(copyRef).append(switchP);
			});	
	}

Pour generer des boutons de navigations, clonons un modele

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function creer_link(nom){
	var switchP = $('#test ul.switchProject').clone();
		$(switchP).removeClass('switchProject');
		var next_elt = $('.nom'+suivant(nom));
		var prev_elt = $('.nom'+precedent(nom));
		$(switchP).find('.next').click(function(e){
			if (next_elt) $(next_elt).click();
			return false;
			});	
		$(switchP).find('.prev').click(function(e){
			if (prev_elt) $(prev_elt).click();
			return false;
			});
		return switchP;	
	}

Ajoutons a la fin la classe lien-ref un modele de boutons

Code:

1
2
3
4
5
6
7
8
9
<div id="test">
    	<div class="liens-ref">
....
                <ul class="switchProject">
			<li><a href="" class="prev">prev</a></li>
			<li><a href="" class="next">next</a></li>
		</ul>
         </div>
</div>

sans oublier de cacher le modele

Code:

#test ul.switchProject {display : none;}

reste a definir les fonctions precedent et suivant

Code:

1
2
3
4
5
6
7
8
9
10
function precedent(nom) {
		var tab = nom.split('nom');
		var result = parseInt(tab[1]) - 1;
		return  result;
		}
function suivant(nom){
		var tab = nom.split('nom');
		var result = parseInt(tab[1]) + 1;
		return  result;
		}