Je cherchais une autre utilisation à ce très bon plugin qu’est jQuery Path et j’ai pensé à un carrousel dont les éléments se déplacerait sur un cercle, rien de bien extraordinaire, mais un effet sympa et surtout un exercice plus dur que ce à quoi je m’attendais.
Tout d’abord je remercie Fabien pour son aide sans qui je n’aurais sans doute pas réussi, mais je pense qu’il a aussi bien apprécier ce petit casse-tête, dont voici le résultat.
Cet effet n’est pas sans rappeler celui du plugin roundAbout, mais il apporte quelques différences notables qui pourraient être utiles à certains.
Voici la structure HTML :
Dans notre exemple le carrousel occupe toute la largeur de la page et les éléments du haut sortent du cadre.
Nous plaçons toutes les images (dont la taille peut varier) dans une liste toute simple. Puis nous ajoutons 2 boutons à sa suite. Tout simplement.
Puis vient le CSS :
#container { width:100%; overflow:hidden; height:500px; } #container ul { margin:200px auto; position:relative; width:370px; } #container li { list-style:none; position:absolute; } .gauche, .droite { position:absolute; } .gauche { left:200px; } .droite { right:200px; }
Nous déclarons une taille au container pour qu’il puisse afficher les éléments, mais vous pouvez adapter à votre guise, de même que pour la liste.
Les éléments de la liste doivent être positionnés par rapport à celle-ci.
Encore du tout simple, j’aime ça! A ce stade tous vos éléments doivent s’afficher les uns sur les autres, pas de panique javascript va nous positionner tout ça.
Pour faire fonctionner ce script vous aurez donc besoin de jquery et de jQuery Path!
Allons-y pour le script :
var nombre = $("#container ul li").length; var ecart = 360/nombre; var posDep = 0; var posArr = 0; var current = 0; var centerX = 0; var centerY = -500; var radius = 500; for (i = 0; i < nombre; i++) { posDep = i*ecart; posArr = posDep - ecart; eval("var arc_params" + i +" = {center: [centerX, centerY],radius: radius,start: posDep,end: posArr,dir: 1}"); $("#container li:eq(" + i + ")").animate({ path: new $.path.arc(eval("arc_params" + i)) },0); } $("button.gauche").click(function(){ for (i = 0; i < nombre; i++) { var newstart = eval("arc_params" + i +".start;"); var newend = eval("arc_params" + i +".end;"); var dir = eval("arc_params" + i +".dir;"); newstart = newend; newend += ecart; dir = 1; eval("arc_params" + i +".start = newstart; arc_params" + i +".end = newend; arc_params" + i +".dir = dir;"); $("#container li:eq(" + i + ")").animate({ path: new $.path.arc(eval("arc_params" + i)) },500); } }); $("button.droite").click(function(){ for (i = 0; i < nombre; i++) { var newstart = eval("arc_params" + i +".start;"); var newend = eval("arc_params" + i +".end;"); var dir = eval("arc_params" + i +".dir;"); newstart = newend; newend -= ecart; dir = -1; eval("arc_params" + i +".start = newstart; arc_params" + i +".end = newend; arc_params" + i +".dir = dir;"); $("#container li:eq(" + i + ")").animate({ path: new $.path.arc(eval("arc_params" + i)) },500); } });
La première partie va définir les différentes variables utilisées, les images se placeront automatiquement suivant leurs nombres, super!!
Vous pouvez modifier le rayon du cercle et la position de son centre.
On ne peut utiliser que l'effet 'animate' avec jQuery Path, donc pour positionner les images on dit que cet effet dure 0 seconde, pour que ce soit instantané.
La suite (un peu redondante) va servir pour les événements de click. On redéfinit à chaque clique les positions de départ et d'arrivée et suivant le bouton on change la direction.
Voilà pour ce petit tuto, encore un peu rapide. J'espère que vous trouverez des applications ou que ça vous donnera des idées.
Merci de l'avoir lu et à bientôt!