/* Content Slider (Class) * * @string: Id de la div conteneur (Container) * @int: vitesse de défilement (Speed) * @string: sens de défilement (Direction) * */ function ContentSlider() { // Récupération des paramètres var Options = arguments[0]; // Récupération du speed this.Speed = Options.Speed||4000; // Récupération de la durée du slide this.Duration = Options.Duration||1; // Récupération de la direction this.Direction = Options.Direction||"Right"; // Récupération de l'auto start this.AutoStart = (Object.isUndefined(Options.AutoStart)) ? true : Options.AutoStart; // Récupération de Stop On Over this.StopOnOver = (Object.isUndefined(Options.StopOnOver)) ? true : Options.StopOnOver; // Récupération du conteneur if(Object.isElement($(Options.Container))) this.Container = $(Options.Container); else return; // Définition de IsSliding this.IsSliding = false; // Définition du this var ThisCS = this; // Largeur diapo this.DiapoWidth = 0; // Nombre de diapo this.NbDiapo = 0; // Tableau des diapos this.TabDiapo = Array(); // Parcours des diapos this.Container.childElements().each(function(CurDiapo){ // Mémorisation de la largeur d'un diapo ThisCS.DiapoWidth = parseInt(CurDiapo.getWidth()); // Mémorisation des diapos ThisCS.TabDiapo.push(CurDiapo); // Incrémentation du nombre de diapo ThisCS.NbDiapo ++; }); // Définition de la taille du container this.Container.setStyle({'width':(this.NbDiapo * this.DiapoWidth) + 'px'}); // Objet TimeOut this.Time = Object; // Stop On Over if(this.StopOnOver && this.AutoStart) { // Stop le défilement automatique si MouseOver ThisCS.Container.observe('mouseover',function(event){ ThisCS.Stop(); }); // Redémarre le défilement automatique si MouseOut ThisCS.Container.observe('mouseout',function(event){ ThisCS.Start(); }); } // Event Slide Left if(Object.isElement($("ContentSliderLeft"))) { $("ContentSliderLeft").observe('click',function(event){ ThisCS.SlideLeft(); }); } // Event Slide Right if(Object.isElement($("ContentSliderRight"))) { $("ContentSliderRight").observe('click',function(event){ ThisCS.SlideRight(); }); } /* Start() * * Lance le slide */ this.Start = function() { this.Time = setInterval(this.Slide,this.Speed); }; /* Stop() * * Stop le slide */ this.Stop = function() { clearInterval(this.Time); }; /* SlideLeft() * * Lance un slide vers la gauche */ this.SlideLeft = function() { // Si aucun effect n'est en cours if(!ThisCS.IsSliding) { // Lance un défilement direction Left ThisCS.Direction = "Left"; ThisCS.Slide(); } }; /* SlideRight() * * Lance un slide vers la droite */ this.SlideRight = function() { // Si aucun effect n'est en cours if(!ThisCS.IsSliding) { // Lance un défilement direction Right ThisCS.Direction = "Right"; ThisCS.Slide(); } }; /* IndexOfDiapo() * * @object: Diapo dont on cherche l'index * * Retourne l'index du diapo en paramètre */ this.IndexOfDiapo = function(SearchDiapo) { // Parcours des diapo for(var i=0;i<=ThisCS.TabDiapo.length;i++) { // Renvoi l'index si c'est le bon if(SearchDiapo == ThisCS.TabDiapo[i]) return (i+1); } }; /* Slide() * * Initialise le content slider */ this.Slide = function() { // Si aucun effet en cours if(!ThisCS.IsSliding) { // Activation de IsSliding ThisCS.IsSliding = true; // Désactivation des curseurs if(Object.isElement($("ContentSliderLeft"))) { $("ContentSliderLeft").style.cursor = "none"; } if(Object.isElement($("ContentSliderRight"))) { $("ContentSliderRight").style.cursor = "none"; } // Tableau des effects var TabEffect = Array(); // Parcours des diapos ThisCS.Container.childElements().each(function(CurDiapo){ // Vers la gauche if(ThisCS.Direction == "Right") { // Ajout de l'effet à la liste TabEffect.push( // Déplacement du diapo courant new Effect.Move(CurDiapo,{ y:0, sync:true, x:(ThisCS.DiapoWidth * -1), afterFinish:function(Effect) { // Index de la diapo var DiapoIndex = ThisCS.IndexOfDiapo(Effect.element); // Position x du diapo courant var DiapoLeft = parseInt(Effect.element.getStyle('left').replace('px','')); // Test si le diapo doit subir un replacement if(DiapoLeft == ((DiapoIndex * ThisCS.DiapoWidth)*-1)) { // Calcul de la position x de replacement var NewLeft = ((ThisCS.NbDiapo - DiapoIndex) * ThisCS.DiapoWidth); // Replacement de la diapo Effect.element.setStyle({left: NewLeft + 'px'}); } } }) ); } // Vers la droite else if(ThisCS.Direction == "Left") { // Ajout de l'effet à la liste TabEffect.push( // Déplacement du diapo courant new Effect.Move(CurDiapo,{ y:0, sync:true, x:(ThisCS.DiapoWidth * +1), beforeStart:function(Effect) { // Index de la diapo var DiapoIndex = ThisCS.IndexOfDiapo(Effect.element); // Position x du diapo courant var DiapoLeft = parseInt(Effect.element.getStyle('left').replace('px','')); // Test si le diapo doit subir un replacement (Si Pos Réelle == Pos Théorique le plus à droite) if(((ThisCS.NbDiapo-1)*ThisCS.DiapoWidth) == (((DiapoIndex-1)*ThisCS.DiapoWidth)+DiapoLeft)) { // Calcul de la position x de replacement var NewLeft = ((((DiapoIndex-1)*ThisCS.DiapoWidth) * -1) - ThisCS.DiapoWidth); // Replacement de la diapo Effect.element.setStyle({left: NewLeft + 'px'}); } } }) ); } }); // Lance les effets new Effect.Parallel(TabEffect, { duration:ThisCS.Duration, afterFinish:function() { // Désactivation de IsSliding ThisCS.IsSliding = false; // Réactivation des curseurs if(Object.isElement($("ContentSliderLeft"))) { $("ContentSliderLeft").style.cursor = "pointer"; } if(Object.isElement($("ContentSliderRight"))) { $("ContentSliderRight").style.cursor = "pointer"; } } }); } }; // Lance le défilement if(this.AutoStart) this.Start(); };