VirtuousWebVirtuousWebVirtuousWeb

On m’a fait la remarque que les scrollable dans les festins de webdesign et sur le portfolio n’était pas visible, alors j’ai cherché un autre moyen de faire ces galeries. Aujourd’hui nous allons détailler l’intégration d’une galerie, dont le système se rapproche du carrousel mais qui ne fait pas de boucle (à voir dans une prochaine version peut-être) et qui au lieu de cliquer, s’anime en ‘draggant’ les images.

Tout d’abord rendez-vous sur le site de jQuery si vous souhaitez en savoir plus sur cette fabuleuse bibliothèque javascript.
Puis faites un tour sur jQuery UI pour approfondir et multiplier les possibilités d’animations.

Attaquons maintenant notre tutoriel :
La démonstration
Le pack à télécharger

Commençons par notre page HTML, et en particulier les appels javascript, ici nous pointons vers les versions jQuery en ligne, mais vous pouvez les télécharger sur le site. settings.js sera le script dans lequel on va mettre notre code.

Et dans le body voici la structure simplicime autour de laquelle nous allons construire notre galerie. Une liste, une classe, peut-on faire plus simple ?

Avec si peu de HTML, le CSS n’est pas copieux non plus :

body {
	margin:0;
	background:#eee;
}
#container {
	width:709px;
	margin:100px auto;
}
.images {
	margin:0;
	padding:0;
}
.images li {
	list-style:none;
	padding:0;
	margin:0;
	float:left;
	width:709px;
	height:500px;
	cursor:e-resize; /*On détourne ce picto pour signaler la possibilité de déplacer*/
}

A ce stade vous devez avoir une belle liste d’image les unes en dessous des autres.
Nous allons maintenant attaquer le coeur de cet article, le script. Je vous le commente au fur et à mesure pour bien détailler chaque étape.

$(document).ready(function () {
    Vignette = $(".images li:visible"); //On prend cette vignette comme repère
    NbVignette = $(".images li").length; //On cacule le nombre de vignette

	$(".images")
	    .wrap(' ici vous ouvrez et fermez une balise div avec la classe .scrollable ') //On encadre la liste d'une div
	    .css("width", (Vignette.width() * NbVignette) ); //et on élargi la liste en fonction du nombre de vignettes

	$(".scrollable") //On définit les attributs de la div
	    .width( Vignette.width() )
	    .height( Vignette.height() )
	    .css("overflow", "hidden")

    i = 0; //Ce chiffre va nous permettre de savoir quelle vignette afficher
	var position = 0;

	$(".images").draggable({
		axis: 'x', //sur l'axe horizontal
		distance: 30, //Il faut déplacer l'image sur au moins 30 pixels

		stop: function(event, ui) { //à la fin du drag
			if(ui.position.left < position) { //si la position est négative par rapport à la précédente
				if (i < (NbVignette - 1)) { //si on n'est pas à la dernière vignette
				 	i++;
					position = -(Vignette.width() * i);
				 	$(".images").animate({
				 		left: position
				 	});
				}
				else { // Si on on est à la dernière vignette
					$(".images").animate({
						left: position
					});
				}
	        }
			else { //si la position est positive par rapport à la précédente
				if(i > 0) { //Si on n'est pas à la première vignette
					i--;
					position = -(Vignette.width() * i);
					$(".images").animate({
						left: position
					});
				}
				else { // Sinon on est à la première vignette
					$(".images").animate({
						left: position
					});
				}
	        }
        }
    });
});

Voilà ce n’était pas bien long.
Merci Fabien pour ta modification, l’effet est encore meilleur !

J’espère que ça vous a plu, à bientôt pour des nouveaux trucs.