// JavaScript Document
		$(window).load(function(){
			//Initialisation des variables
			var thumbnail = {
				imgIncrease : 100, /* Augmentation du nombre de pixel de l'image pour le zoom) */
				effectDuration : 400, /* Le temps de l'effet */
				/*
				Obtenir la largeur et la hauteur des images.
				Pour cela nous allons utiliser 2 choses :
					 Faire les légendes de la liste de la même taille que les images
					 Remettre les images à la taille normal après l'agrandissement
				*/
				imgWidth : $('.vignette ul li').find('img').width(), 
				imgHeight : $('.vignette ul li').find('img').height() 
			};
			$('.vignette ul li').css({ 
				'width' : thumbnail.imgWidth, 
				'height' : thumbnail.imgHeight 
			});
			//Quand le curseur survol l'image...
			$('.vignette ul li').hover(function(){
				$(this).find('img').stop().animate({
					/* Augmentez la largeur de l'image pour l'effet d'agrandissement*/
					width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
					/* Nous devons changer la position gauche et supérieure pour avoir l'effet 
					d'agrandissement, donc nous les déplaçons en négatif :
					Position de la moitié de l'imgIncrease */
					left: thumbnail.imgIncrease/2*(-1),
					top: thumbnail.imgIncrease/2*(-1)
					
				},{ 
					"duration": thumbnail.effectDuration,
					"queue": false
				});
				//Montre la légende utilisant l'événement slideDown
				$(this).find('.legende_main:not(:animated)').slideDown(thumbnail.effectDuration);
			//Quand le curseur ne survol plus la zone...
			}, function(){
				//Trouve l'id "img" et l'anime
				$(this).find('img').animate({
					/* retour à la taille normal*/
					width: thumbnail.imgWidth,
					/* retour à la position normal : Gauche et haut*/
					left: 0,
					top: 0
				}, thumbnail.effectDuration);
				//Cache la légende utilisant l'événement slideUp
				$(this).find('.legende_main').slideUp(thumbnail.effectDuration);
			});
			
		});