//On s'assure d'abord que le document est chargé :
$(document).ready(function(){
$("a.fancyimage").fancybox();							   
//On configure notre script en lui indiquant le nombre d'objet visible en même temps :
var nbdisplay = 4;
//Puis on compte le nombre d'objet présent dans notre liste, à adapter peut-être à votre html
var nbobjet = 8;
//Enfin on amorce une variable à 0 qui va nous permettre de nous repérer dans la navigation
var repere = 0;
//On crée ensuite deux fonctions assigné sur chacun de nos boutons de navigation :
//La fonction qui permet d'avancer dans le carrousel est assigné au lien possédant l'id "next" :
$('#next').click(
function () {
if ($(this).is(".last")==false) //je n'active la fonction que si je ne suis pas sur le dernier élément
{
repere++; //j'incrémente ma variable de repère
$("#defileur").animate({"left": "-=146px"}, "slow");//je déplace vers la gauche mon conteneur de largeur totale d'un élément (element+marge+bordure).
$('#prev').removeClass();//j'enlève la classe du lien "précedent" pour le faire apparaitre puisque désormais je peux naviguer en arrière.
if((repere+nbdisplay)==nbobjet){//enfin, je calcule si je ne suis pas au bout de ma liste.
$(this).addClass("last");//le cas écheant, j'ajoute une classe au bouton pour le faire disparaitre.
}
}
return false;
});
//La fonction qui permet de reculer dans le carrousel est assigné au lien possédant l'id "prev" :
$('#prev').click(
function () {
if ($("this").is(".first")==false) {
$("#defileur").animate({"left": "+=146px"}, "slow");
repere--;
$('#next').removeClass();
if(repere==0){
$(this).addClass("first");
}
}
return false;
});
});