Galerie Snoupix Flip

02 fév | Catégorie: Javascript | Rédigé par Stéphane | 10243 lectures

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.

demo source

É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 <div class="grande_image"> qui contient l'image en taille réelle avec par défaut la première image à afficher, et une <div class="miniatures"> avec toutes les miniatures.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Snoupix Flip - Demo</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
	<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
	<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2.packed.js"></script>
	<script type="text/javascript" src="js/jquery.flip.js"></script>
	<script type="text/javascript" src="js/codeFlip.js"></script>
</head>
<body>
	<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" href="#" title="TheCube HDR">
					<img src="images/TheCube_s.jpg" class="chemin" alt="images/TheCube.jpg"/>
				</a>
				<a class="flipBT" href="#" title="Audi R8 HDR">
					<img src="images/R8_s.jpg" class="chemin" alt="images/R8.jpg"/>
				</a>
				<a class="flipBT" href="#"   title="Subaru HDR">
					<img src="images/subaru_s.jpg" class="chemin" alt="images/subaru.jpg"/>
				</a>
				<a class="flipBT" href="#"  title="Bazzar HDR">
					<img src="images/Bazzar_s.jpg" class="chemin" alt="images/Bazzar.jpg"/>
				</a>
				<a class="flipBT" href="#"  title="BlueOnFire HDR">
					<img src="images/BlueOnFire_s.jpg" class="chemin" alt="images/BlueOnFire.jpg"/>
				</a>
				<a class="flipBT" href="#"  title="toyRoom HDR">
					<img src="images/ToyRoom_s.jpg" class="chemin" alt="images/ToyRoom.jpg"/>
				</a>
				<a class="flipBT" href="#"  title="Trunk HDR">
					<img src="images/Trunk_s.jpg" class="chemin" alt="images/Trunk.jpg"/>
				</a>
				<a class="flipBT" href="#"  title="WinterTrain HDR">
					<img src="images/WinterTrain_s.jpg" class="chemin" alt="images/WinterTrain.jpg"/>
				</a>
			</div>
		</div>
	</div>
</body>
</html>

É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 type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2.packed.js"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript" src="js/codeFlip.js"></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 <span> 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 <a>.

C'est à cet endroit que l'on utilise le plugin Flip. On éxécute ce code en poitant vers la <div> 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 <img> de ma <div class="grande_image">, 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 <span> 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.

Cette création par Snoupix.com est mise à disposition selon les termes de la licence Creative Commons.

Partager ce tutoriel :

8 Commentaires

le 02 février à 23h58 François Répondre Ca gère cet effet, j'aime bien!!

le 15 février à 02h11 Julien Répondre 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.

le 15 mars à 20h46 Alex Répondre 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 !

le 15 avril à 13h02 Ariden Répondre 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

le 08 novembre à 00h20 Arno Répondre a oui exacte dommage!!

le 22 mars à 11h08 algeria Répondre Oh Nice !

le 27 mars à 15h41 dede Répondre 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