Discussion :

[oceane751]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#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

[sdamart]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("."+$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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[oceane751]

en fait j'ai 2 images (fleches), une à droite et une à gauche pour faire défiler mes images

mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[oceane751]

ya du php/mysql

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

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
 
 
 
$(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;
 
 
		});
});

[sdamart]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id='SlideContainer'>
[...]
</div>
<span id='last'>&lt;</span>
<span id='next'>&gt;</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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id='SlideContainer'>
<div id="slider">[...]</div>
</div>[...]

maintenant on va intégrer nos trois image pour le test

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
//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é