Bonjour à toute et tous,
j'ai donc un petit slideshow avec un bouton suivant et precedent.
j'aimerais que quand je clic sur le bouton suivant, mon slide show s'anime en allant de gauche a droite, j'ai essyae avec un toggle.
ca donne ceci pour donner une idee
1234 -> 2345 -> 3456 -> 4567 -> 5678 -> 6789 -> 1234 et ainsi desuite.
d'ailleur ca m'etonne même que ca fasse cela avec mon code.
en fait pour expliquer en gros, j'ai un div de 800 px en ds se div 4 image doivent aparaitre pas plus, et donc lorsque je clic sur suivant les 4 image suivante doivent apparaitre.
J'avoue que je suis vraiment un petit novice et que j'ai vraiment envie d'apprendre jQuery donc tout les consseils sont aussi les bienvenues
Encore merci a vous de regardé a mon probleme
Voici mon code
mon css
j'ai donc un petit slideshow avec un bouton suivant et precedent.
j'aimerais que quand je clic sur le bouton suivant, mon slide show s'anime en allant de gauche a droite, j'ai essyae avec un toggle.
ca donne ceci pour donner une idee
1234 -> 2345 -> 3456 -> 4567 -> 5678 -> 6789 -> 1234 et ainsi desuite.
d'ailleur ca m'etonne même que ca fasse cela avec mon code.
en fait pour expliquer en gros, j'ai un div de 800 px en ds se div 4 image doivent aparaitre pas plus, et donc lorsque je clic sur suivant les 4 image suivante doivent apparaitre.
J'avoue que je suis vraiment un petit novice et que j'ai vraiment envie d'apprendre jQuery donc tout les consseils sont aussi les bienvenues
Encore merci a vous de regardé a mon probleme
Voici mon code
<div id="contener">
<div id="precedent">
<a href="#"><img src="icone/precedent.png" alt="précedent" /></a>
</div>
<div id="menuGalerie">
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album1/2945791126_c443dd45e8.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album2/2668814256_09d814a09f.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album3/1391277567_8c546be040.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album4/1391277431_a1a1877afa.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album5/1391277717_ed0ae3571f.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album6/2918373631_3479bf9a59.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album7/2948148820_cb282c9802.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album8/3477236001_85c08f3b3d.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
<div class="galerie">
<div class="rolover"></div>
<p class="titre">titre</p>
<div class="propriete">
<img src="photos/album9/2808204863_759bc959ec.jpg" alt="photo1" />
</div>
<p class="description">
description:<br/>
Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum.
</p>
</div>
</div>
<div id="suivant">
<a href="#"><img src="icone/suivant.png" alt="suivant" /></a>
</div>
</div>
mon css
body{
background-color:#000000;
color:#ffffff;
overflow:hidden;
}
#contenerGalerie h1{
width:800px;
margin:0 auto;
}
#contener{
width:921px;
margin:0 auto;
}
#precedent, #suivant{
float:left;
height:306px;
margin-top:25px;
}
#precedent img, #suivant img{
margin-top:95px;
opacity:0.2;
-moz-opacity:0.2;
-o-opacity:0.2;
-webkit-opacity:0.2;
}
#menuGalerie{
float:left;
width:725px;
height:306px;
margin-top:25px;
overflow:hidden;
}
.galerie{
float:left;
margin-left:20px;
height:300px;
border:3px solid #666;
width:150px;
background:#333;
}
.titre{
margin:0;
margin-left:12px;
font-size:14px;
}
.description{
border:2px solid #666;
width:115px;
height:155px;
font-size:12px;
margin-left:13px;
padding:3px;
color:#CCC;
background:-moz-linear-gradient(top, #333 0%, #666 75%);
background:-0-linear-gradient(top, #333 0%, #666 75%);
background:-webkit-linear-gradient(top, #333 0%, #666 75%);
background:linear-gradient(top, #333 0%, #666 75%);
-moz-box-shadow :3px 3px 5px #000;
-webkit-box-shadow :3px 3px 5px #000;
-o-box-shadow :3px 3px 5px #000;
box-shadow :3px 3px 5px #000;
}
.propriete{
height:83px;
overflow:hidden;
border:2px solid #ffffff;
width:120px;
margin:0 auto;
margin-top:7px;
}
.galerie img{
width:125px;
}
.rolover{
position:absolute;
height:300px;
width:150px;
background-color:#000;
opacity:0;
}
.rolover:hover{
opacity:0.4;
}
$(document).ready(function() {
$(".galerie:gt()").hide();
$("#suivant a").click(function() {
var $image_suivante = $(".galerie:visible").next(".galerie");
if($image_suivante.length<4) $image_suivante = $(".galerie");
$(".galerie:visible").toggle();
$image_suivante.toggle();
return false;
});
$("#precedent a").click(function() {
var $image_precedente = $(".galerie:visible").prev(".galerie");
if($image_precedente.length<1) $image_precedente = $(".galerie");
$(".galerie:visible").toggle();
$image_precedente.toggle();
return false;
});
});