Tu peux aussi utiliser la fonction animate() qui te permet d'animer toi même ton slide... c'est à mon avis plus léger que UI, mais probablement plus difficile pour obtenir le même résultat :?

[quote="Gabi1202"]J'ai un peux regardé jquery ui mais j'avoue que je m'en sort pas, je suis un grd novice en la matière mais quand je vois la puissance de cette librairie et tout ceux qui en parle ca me donne envie d'apprendre.

donc si tu as des cosseil ou des site avec tuto si possible en français je suis preneur.[/quote]

Pour l'installation de jQuery UI tu devrais pouvoir te débrouiller (c'est pareil que jquery). Je peux te traduire la doc de la page que je t'ai donnée en lien (dont tu peux te servir comme démonstration) :

[code]toggle( effect, [options], [speed], [callback] )

La méthode toggle améliorée prend en paramètre optionnels les effets jQuery UI. Seul le premier paramètre est obligatoire, les autres sont optionnels.

Arguments:

effect <chaîne de caractères> L'effet à utiliser. Valeurs possibles: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

options <objet/tableau associatif> Les options à utiliser pour l'accomplissement de l'effet.

speed <chaîne de caractères ou entier> soit une chaîne représentant une vitesse d'effet prédéfinie ("slow", "fast") soit une durée en millisecondes.

callback <fonction> Une fonction qui sera éxécutée une fois l'animation terminée.
[/code]

J'ai un peux regardé jquery ui mais j'avoue que je m'en sort pas, je suis un grd novice en la matière mais quand je vois la puissance de cette librairie et tout ceux qui en parle ca me donne envie d'apprendre.

donc si tu as des cosseil ou des site avec tuto si possible en français je suis preneur.

Sinon j'ai mi en ligne se que je voulais fair, c'est plus facile comme ca, je voudrai donc donné cette effet de slide qui va de la droite vers la gauche quand tu fais suivant et de la gauche vers la droite quand tu fais précedent

Voici le lien

www.netbebook.com/galerie

Merci pour ta réponse, je vais regarder ca tranquilement et vous direz si je m'en sort :p

Hello,

As-tu regardé du côté de jQuery UI ? Il y a justement une animation "slide" pour toggle qui semble faire ce que tu veux :)

http://jqueryui.com/docs/toggle/

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>

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

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 et pas avec un fadeout.

voici se que j'ai fait avec un toggle ca fonctionne plus ou moins, je dois certainement encore fignolé mais le togglene va pas tu tout avec se que je voudrait comme resultat, c'est pour cela que appel a vos connaissance :)

Voici mon code html

[html]
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>
[/html]

mon css

[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;
}
[/css]

jQuery

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

});
[/code]

En esperant que vous pourrez me donnez un petit coup de pouce :)

Gabi