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

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

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