Sans-titre-1

Galerie Snoupix Flip

Ce premier tutoriel se base sur la librairie Javascript : jQuery. Nous allons apprendre à créer une galerie d’images en utilisant cette librairie ainsi que Flip, un plugin jQuery qui ajoute un effet de rotation afin d’afficher du nouveau contenu.

 

 

 

J’ai utilisé dans cette galerie les photos HDR de cette actu.

La galerie a été testée sur : Firefox, Safari, IE 6/7/8 & Chrome.

Étape 1 : Le code HTML

Il faut tout d’abord constituer notre galerie au niveau HTML et CSS, viendra par la suite l’animation avec le jQuery.

Il est nécéssaire d’avoir deux versions de chaque image, une miniature (ici 100*67px) et la taille originale.

On a donc une

qui contient l’image en taille réelle avec par défaut la première image à afficher, et une  

avec toutes les miniatures.


	Snoupix Flip - Demo

	<script src="js/jquery-1.3.1.js" type="text/javascript"><!--mce:0--></script>
	<script src="js/jquery-ui-personalized-1.6rc2.packed.js" type="text/javascript"><!--mce:1--></script>
	<script src="js/jquery.flip.js" type="text/javascript"><!--mce:2--></script>
	<script src="js/codeFlip.js" type="text/javascript"><!--mce:3--></script>
<div id="header">
		<img src="images/Snoupix_Flip.jpg" alt="Snoupix Flip" /></div>
<div id="conteneur">
<div id="principale">
<div id="flipBox">
<div class="grande_image">
					<img src="images/TheCube.jpg" alt="Snoupix Flip" /><span>The Cube HDR</span></div>
</div>
<div class="miniatures">
				<a class="flipBT" title="TheCube HDR" href="#">
					<img class="chemin" src="images/TheCube_s.jpg" alt="images/TheCube.jpg" />
				</a>
				<a class="flipBT" title="Audi R8 HDR" href="#">
					<img class="chemin" src="images/R8_s.jpg" alt="images/R8.jpg" />
				</a>
				<a class="flipBT" title="Subaru HDR" href="#">
					<img class="chemin" src="images/subaru_s.jpg" alt="images/subaru.jpg" />
				</a>
				<a class="flipBT" title="Bazzar HDR" href="#">
					<img class="chemin" src="images/Bazzar_s.jpg" alt="images/Bazzar.jpg" />
				</a>
				<a class="flipBT" title="BlueOnFire HDR" href="#">
					<img class="chemin" src="images/BlueOnFire_s.jpg" alt="images/BlueOnFire.jpg" />
				</a>
				<a class="flipBT" title="toyRoom HDR" href="#">
					<img class="chemin" src="images/ToyRoom_s.jpg" alt="images/ToyRoom.jpg" />
				</a>
				<a class="flipBT" title="Trunk HDR" href="#">
					<img class="chemin" src="images/Trunk_s.jpg" alt="images/Trunk.jpg" />
				</a>
				<a class="flipBT" title="WinterTrain HDR" href="#">
					<img class="chemin" src="images/WinterTrain_s.jpg" alt="images/WinterTrain.jpg" />
				</a></div>
</div>
</div>

Étape 2 : Le CSS

Voilà le style appliqué aux éléments HTML. Il n’y a rien de particulier dans ce code, pour ceux qui souhaitent obtenir plus de renseignement sur le css, je vous laisse jeter une oeil dans la rubrique HTML/CSS de l’encyclopédie snoupix.

body {
	font-family: Georgia, Verdana, Arial, sans-serif;
}
a img {
	border: 2px solid #757575; /* Propriété CSS pour IE7 */
}
a:link {
	text-decoration: none; /* Propriété CSS pour IE7 */
}
#header, #conteneur {
	width: 900px;
	margin: 0 auto;
}
#header {
	margin: 0 auto;
	padding: 10px 0 7px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#conteneur #principale {
	width: 600px;
	float:left;
	margin: 10px 0 0 45px;
}
#flipBox {
	margin: 0 auto;
	height: 400px;
}
.grande_image img {
	padding: 5px;
	border: 2px solid #757575;
	width: 100%;
}
#debut, .grande_image span {
	position: relative;
	top: -50px;
	left: 5px;
	font-size: 1.2em;
	padding: 5px 10px 5px 10px;
	background-color: white;
	color: black;
	font-style: italic;
	opacity: 0.7;
	clear: left;
}
div.miniatures {
	margin: 0 auto;
	margin-top: 35px;
}
div.miniatures a {
	outline: none;
}
div.miniatures a img {
	padding: 3px;
	border: 2px solid grey;
}

Étape 3 : Le jQuery avec le plugin Flip

On arrive à la partie qui permet d’animer notre galerie afin de la rendre beaucoup plus agréable à regarder.

Comme on peut le voir dans notre page, il est nécéssaire d’importer ces fichiers javascript :

<script src="js/jquery-1.3.1.js" type="text/javascript"><!--mce:4--></script>
<script src="js/jquery-ui-personalized-1.6rc2.packed.js" type="text/javascript"><!--mce:5--></script>
<script src="js/jquery.flip.js" type="text/javascript"><!--mce:6--></script>
<script src="js/codeFlip.js" type="text/javascript"><!--mce:7--></script>
  • La version de jQuery utilisée est la 1.3.1 qui est sortie récemment.
  • jquery-ui-personalized-1.6rc2.packed.js est nécéssaire pour le plugin Flip.
  • jquery.flip.js est notre plugin.
  • codeFlip.js est le code jQuery séparé du fichier HTML.

Voici à quoi ressemble notre code jQuery :

$(document).ready(function(){
	$(".flipBT").click(function(){
		$(".grande_image span").empty();
		var chemin = $(this).find(".chemin").attr("alt");
		var description = $(this).attr("title");

		$("#flipBox").flip({
			direction: 'bt',
			color: 'white',
			speed: 300,
			content: $('.grande_image img').attr({ src: chemin })
		});

		$('.grande_image span').html("" + description + "");
	});

	$(function() {
		   $('.miniatures img').animate({"opacity": .5 });
		   $('.miniatures img').hover(function() {
		   	$(this).stop().animate({ "opacity": 1 });
		    }, function() {
		    	$(this).stop().animate({ "opacity": .5 });
		   });
    });
});

Une fois que la page est bien chargée : $(document).ready, on commence par créer une fonction qui est éxécutée lorsque l’on va cliquer sur une des miniatures.

Le qui contient la description de notre image est vidé grâce à la propriété empty(), ce qui permet d’afficher par la suite les descriptions des miniatures cliquées.

Ensuite on déclare deux variables: chemin et description.

Chaque miniature possède dans son alt le chemin vers l’image en taille réelle. On récupère la description qui elle est présente dans le title de la balise .

C’est à cet endroit que l’on utilise le plugin Flip. On éxécute ce code en poitant vers la

possèdant l’id FlipBox. 

$("#flipBox").flip({
	direction: 'bt',
	color: 'white',
	speed: 300,
	content: $('.grande_image img').attr({ src: chemin })
});

Ensuite, on renseigne 4 propriétés :

  • direction: La direction du « flip ». les valeurs acceptées sont: ‘tb’, ‘bt’, ‘lr’, ‘rl’ (par défaut: ‘tb’).
  • color: La couleur de fond lorsque l’effet est terminé.Dans mon cas je met du blanc.
  • speed: Comme son nom l’indique, c’est la vitesse de rotation (par défaut elle est à 500).
  • content: C’est le nouveau contenu que l’on affiche. Ici, je souhaite que ce soit dans la balise de ma
    , j’affecte dans le src de cette image le chemin que j’ai préalablement récupéré dans ma variable chemin.

     

Je sélectionne ensuite le servant à la description, l’attribut html permet de modifier le contenu d’un élément html. Dans mon cas, je souhaite intégrér la description de l’image que je souhaite afficher.

On termine par ajouter un effet d’opacité lors du hover :

$(function() {
	$('.miniatures img').animate({"opacity": .5 });
	$('.miniatures img').hover(function() {
		$(this).stop().animate({ "opacity": 1 });
		}, function() {
		$(this).stop().animate({ "opacity": .5 });
	});
	});

La fonction animate() permet de modifier l’opacité. On l’applique d’abord par défaut à toutes les miniatures. Et avec l’évènement .hover, on éxécute en premier la fonction lors du passage de la souris sur l’élément, ici une opacité de 1. Et après la deuxième fonction lorsque la souris n’est plus sur l’élément, on remet l’opacité à 0.5.

Voilà, c’est terminé, vous pouvez voir une démonstration ici et télécharger les fichiers sources.

Dans un prochain tuto, on verra comment gérer cette galerie d’images dynamiquement à l’aide du PHP.

 

9 commentaires

S'abonner au RSS des commentaires
  1. darjadida
    Posté le 21/01/2011 à 0h39

    Jolie script, mais j’aurais aimé que les images soi téléchargez une fois la page afficher

  2. Main Mich
    Posté le 08/09/2010 à 8h12

    Bonjour!
    Tout d’abord très bon script! J’adore!
    Mais je voulais savoir, est il possible d’ajouter un défilement au clic sur la grande image. Un clic qui afficherai la photo précédent. Je débute en JS et c’est un effet qui serai vraiment sympa non?

    Romain.

  3. evdog
    Posté le 15/04/2010 à 11h50

    il faut cacher les vignette pendant le flippe de l’image, ca couperai coure le beug smile avec un petit effet ca gachera rien au scripts

    smile

  4. dede
    Posté le 27/03/2010 à 15h41

    j’ai testé le tutoriel comme décris impeccable.J’ai voulu varié un peu en mettant les vignettes à gauche et là je butte. Si tu as la solution je suis preneur

  5. algeria
    Posté le 22/03/2010 à 11h08

    Oh Nice !

  6. Arno
    Posté le 08/11/2009 à 0h20

    a oui exacte dommage!!

  7. Ariden
    Posté le 15/04/2009 à 13h02

    C’est vrai que c’est dommage que l’image précédente reste jusqu’au chargement de celle d’après. Par ailleurs, sur l’exemple, la galerie bug après à le deuxieme image chargée…

    Sinon, le principe est super

  8. Alex
    Posté le 15/03/2009 à 20h46

    Tuto très sympathique ! Cependant, pourquoi ne pas l’améliorer en préloadant les images ? Car lors du changement, l’image précédente reste jusqu’au chargement de celle d’après. C’est un peu dommage.

    à bientôt !

  9. Julien
    Posté le 15/02/2009 à 2h11

    Actuellement en formation web, j’ai repérer de suite votre site comme étant dans la trempe des PROS !
    J’ai réaliser votre tuto et aprés des heures passées devant mon écran j’ai enfin réussi a en tirer quelquechose !

    OUF mais c’est génial, j’attends la suite pour pouvoir gérer mes photos dans mon backoffice en cours délaboration.

    A trés bientôt j’espère !

    MrJulien.

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>