soucis avec une fonction

Version imprimable

Bonjour à tous !

J'ai un problème que je n'arrive pas à résoudre :\

Je fais un espèce de diapo avec des photos mais ça marche qu'à moitié

En gros, quand je clique sur la fleche de gauche ou de droite ça défile (que je gère avec next() et prev() )

Sauf que je bloque

Quand je fais
Code:

1 2 3 4 5 6 7 8 9 $("#pouet img").click( function() { $clash = $(this).attr("class"); $clas = $(this).next().attr("class"); $("."+$clas).addClass("montrer"); $(this).addClass("cacher"); return false; });
Ca fonctionne (#pouet est l'id où sont mes images)

Mais quand je fais ça (c'est à dire après le clik sur l'une de mes fleches :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $("#droit").click( function() { $clash = $("#pouet img").attr("class"); $clas = $("#pouet img").next().attr("class"); $("."+$clas).addClass("montrer"); $("#pouet img").addClass("cacher"); $("."+$clas).removeClass("cacher"); return false; });
Je comprends bien que le this est important et qu'il va de paire avec l'id ici

Code:

$("#pouet img").click

et ce qui nous permet de savoir sur quel image on est pour que le code se fasse correctement

Donc là je sèche completement...

Quelqu'un pourrait il m'aider?

En attendant, je continue à chercher!

Merci :mrgreen:

Je comprend ce que tu cherche à faire
mais je crois que tu part mal
Dans ta première fonction je vois

Code:

$("."+$clas).addClass("montrer");

donc toutes les images possédant le même attribut classe vont s'afficher sauf celle sur laquelle tu viens de cliquer

On va supposer que toute les images on une classe "cacher" et seul celle sur laquelle tu clique mérite d'avoir d'être cacher
Code:

1 2 3 4 5 6 7 var imgs=$("#pouet img");//comme ça on appel pas jQuery pour rien $("#pouet img").click( function() { imgs.removeClass("cacher"); $(this).addClass("cacher"); return false; });
voila pour la première fonction
la seconde "click droit", un petit index et fonction itérative serait intéressant
Code:

1 2 3 4 5 6 7 8 9 10 11 var index=0; function moveRight(){//donc on va incrémenter l'index if(index+1<$("#pouet img").length()){ index++; $("#pouet img").removeClass("montrer");//on cache toute les images $("#pouet img")[index].addClass("montrer")//On affiche notre image } } $("#droit").click(function(){ moveRight(); });
voila et pour le gauche il te suffira d'avoir une fonction qui décrémente l'index

10/01/2013, 18h43
oceane751
en fait j'ai 2 images (fleches), une à droite et une à gauche pour faire défiler mes images

mon code :
Code:

1 2 3 4 5 6 7 $("#pouet img").click( function() { $clash = $(this).attr("class"); $clas = $(this).next().attr("class"); $("."+$clas).addClass("montrer"); return false; });
fonctionne bien mais ça oblige à cliquer directement sur les images et non sur ces flèches...

et non mes images n'ont pas le même attribut class...
10/01/2013, 18h54
sdamart

Pourrez-tu m'afficher l'intégration HTML de ton carousel pour voir ?
En attendant si tes fleches ont des ID et que veux les autre

Code:

$("#pouet img:not([id])").click([...])

Et il va récuperer toutes les images qui n'ont pas d'ID

ya du php/mysql

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div style="position:relative;">
   	<div style="z-index:1; padding-left:8px; width:200px; height:200px; overflow:hidden;" id="pouet">
                	<?php 
$photo = "SELECT id_users FROM users WHERE pseudo = '".$_SESSION['pseudo']."'";
$querp = mysql_query($photo) or die (mysql_error());
$fep = mysql_fetch_array($querp) or die (mysql_error());
$kl = "SELECT photo, id_photo FROM photo_profil WHERE id_users='".$fep['id_users']."'";
$qkl = mysql_query($kl);
while($fekl = mysql_fetch_array($qkl))
        {
        echo "<img src=upload/".$fekl['photo']." width='200' class='".$fekl['id_photo']."'>";
                                                }
?>
 
</div> 
    <div style="position:absolute;top:60px; z-index:2;">
        <a href="" id="gauche" ><span class="fleche_gauche"></span></a>
         <a href="" id="droit"><span class="fleche_droit"></span></a>
    </div>   
   </div>

et le jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
 
$(document).ready(function() {
 
 
	$("#droit").click(
		function () {
			$clash = $("#pouet img").attr("class");
			$clas = $("#pouet img").next().attr("class");
 
			$("."+$clas).addClass("montrer");
			$("#pouet img").addClass("cacher");
			$("."+$clas).removeClass("cacher");
 
			return false;
 
 
		});
});

Bien je te conseil d'ajouter une seconde classe pou les récupérer plus facilement.

ensuite grâce à jquery tu peux affecter un evénement click même à de simple <span/>

Alors pour réaliser un beau carousel d'image maison tu à besoin d'une div position relative avec un overflow à hidden et une largeur égale à la largeur de tes image

Code:

#SlideContent{position:relative; width:200px; height:197px; overflow:hidden}
Code:

1 2 3 4 5 <div id='SlideContainer'> [...] </div> <span id='last'><</span> <span id='next'>></span>
A présent on va intégrer un élément qui glissera de droite à gauche selon le bouton sur lequel on va cliquer donc position absolute;

Code:

#slider{position:absolute; width:600px; height:197px; left:0px; top:0px;}
Code:

1 2 3 <div id='SlideContainer'> <div id="slider">[...]</div> </div>[...]
maintenant on va intégrer nos trois image pour le test

Code:

#slider img{position:relative; width:200px; height:197px; float:left;}
Code:

1 2 3 4 5 6 7 <div id='SlideContainer'> <div id="slider"> <img src='image1.jpg'> <img src='image2.jpg'> <img src='image3.jpg'> </div> </div>[...]
Et maintenant la partie qui nous intéresse le JavaScript
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 //Récupérer nos images en global var imgs=$('#slider img'); //Definir notre index de déplacement global var _index=0; //Définir le slider de manière global var _slider=$('#slider'); $(function(){ //Fonction pour avancer vers la droite $('#next').click(function(){ //si l'index +1 est inférieur à au nombre d'image-1 pour éviter de montrer une image qui a pas if(index+1<imgs.length()){ index++ //on récupère la position gauche de l'image que l'on souhaite afficher var leftImage=$(imgs[index]).offset().left(); //on récupère la position du slider var leftSlider=_slider.offset().left(); //La position gauche final var l=leftSlider-leftImage; //Puis on anime le tout _slider.animate({left:l},1000); } }) })
Voila j'ai montré avec le bouton de droite ne te reste plus que le bouton de gauche et le tour est joué:ccool:

merci beaucoup pour ce code (un peu compliqué ma fois :D)

j'ai fait un truc comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
$("#droit").click(
		function() {
		if ($("#droit").attr("class") == "") {
			$mal = $("li").next().attr("id");
			$("#droit").addClass($mal);
			$("#"+$mal).addClass("montrer");
			$("#"+$mal).prev().addClass("cacher");
			return false;
		}
		else {
			$pp = $("#droit").attr("class");
			$mal = $("#"+$pp).next().attr("id");
			$("#droit").removeClass($pp);
			$ll = $("#droit").attr("class");
			$("#droit").addClass($mal);
			$("#"+$ll).addClass("montrer");
			$("#"+$pp).addClass("cacher");
			return false;
		}
	});

maintenant il me reste juste à afficher la fleche droite tant qu'il y a des image
et après je passe à gauche :mouarf: