petite annimation en jquery

11 févr. 2012, 13:48

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

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

jQuery

Code : Tout sélectionner

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

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

Gabi

11 févr. 2012, 14:02

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/

11 févr. 2012, 14:05

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

11 févr. 2012, 19:40

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

11 févr. 2012, 20:28

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.

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 : Tout sélectionner

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.

11 févr. 2012, 22:15

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

petite annimation en jquery

Qui est en ligne