VirtuousWebVirtuousWebVirtuousWeb

Pour cette première version que je présente, j’ai juste réussi à reproduire la boucle du carrousel, mais il n’est pas encore possible d’effectuer un défilement. Voyons déjà comment ça marche.

Vous pouvez déjà jeter un oeil au résultat
La démo

Comme je disais il s’agit là d’une première version qui sera perfectionnée pour faire défiler les diapos en cliquant dessus, mais il s’avère que c’est plus dur qu’il n’y paraît (pour moi en tout cas ^^).
Voici quand même la base qui devrait être la bonne. Déjà le HTML puis le CSS, comme d’habitude, le plus simple possible.

Nausicaa



Mon voisin Totoro



Ponyo sur la falaise



Princesse Mononoke



Le voyage de Chihiro

.boxes {
	width:900px;
	height:300px;
	position:relative;
}
.box {
	width:700px;
	height:300px;
	position:absolute;
}
.box img {
	position:absolute;
	top:0;
	left:0;
}
.box h2 {
	position:absolute;
	right:10px;
	top:10px;
	font-size:40px;
	color:#fff;
	text-shadow: #111 4px 4px 4px;
}

Voici pour la forme brute, et jetons un oeil à ce qui va animer tout ça. Pour le moment il n’est pas pluginisé (quel mot savant!), mais je le ferai d’abord évoluer avant de le faire. Il a aussi un lifting à subir avant, et de pouvoir s’adapter à la structure dans laquelle il se trouve, mon exemple est loin d’être assez générique.

$(document).ready(function(){
	var hauteur = $(".box").height();
	var largeur = $(".box").width();
	var chiffre = ($(".box").length) - 1;
	var etat = "auto";

	$(".box h2").hide();
	$(".box:last h2").show();

	for (i = 0; i < 5; i++) {
		$(".box:eq("+ i +")").css({
			left : i*50,
			height : hauteur+(chiffre - i)*-30,
			top : (chiffre - i)*15
		});
		$(".box:eq("+ i +") img").css({
			height : hauteur+(chiffre - i)*-30
		});
	}

	jQuery.fn.pers = function(){
		$(this).animate({left : '+=50', height : '+=30', top : '-=15'},800);
		$("img", this).animate({height : '+=30'},800);
		$(".box:last").prev(".box").find("h2").delay(600).fadeIn(200);
	}
	jQuery.fn.persRet = function(){
		$(this).animate({left : 300, opacity : 0},400,function(){
			$("img", this).css({height : hauteur+(i-1)*-30});
			$("h2", this).hide();
			$(this)
				.prependTo(".boxes")
				.css({left : 200, top : (i-1)*15, height : hauteur+(i-1)*-30})
				.animate({left : 0, opacity : 1},400, function(){
					etat = "auto";
				});
			});
	}

	jQuery.fn.persRota = function(){
		etat = "autoMov";
		$(this).each(function(){
			if ($(this).index() == chiffre) {
				$(this).persRet();
			}
			else {
				$(this).pers();
			}
		});
	}
	var rota =
		setInterval ( function(rota){
			$(".box").persRota();
		}
		,4000);
});

A vrai dire je sèche un peu pour le faire évoluer et le rendre cliquable, voici le script que j'ai ajouté pour le moment et qui fonctionne presque, mais le comportement n'est pas le bon quand on clique plus que le 2ème dans la liste ou si on clique trop de fois...

	$(".box").click(function(){
		if (etat == "auto") {
			clearInterval(rota);
			clearTimeout(oneRota);
			etat = "manual";
			var index = $(this).index();
			var compt = 1;
			while (compt <= (chiffre - index)) {
				compt++;
				$(".box").persRota();
				var oneRota = setTimeout(function(){
					rota =
						setInterval ( function(rota){
							$(".box").persRota();
							etat = "auto";
						}
						,4000);
				},4000);
			}
		}
	});

Donc il reste un peu de boulot et de prise de tête en vue. D'ailleurs si quelqu'un a une solution je suis tout à fait preneur, n'hésitez pas à étaler votre sciences et montrer vos supers pouvoirs de jQuery!

La démo

A bientôt pour la suite du plugin, moussaillons!