Slider de news Mootools
Avec l’arrivée de la technologie Ajax, nous voyons arrivée de nouvelles fonctionnalités et effets assez intéressant. L’un de ses effets et le slide ou le scroll d’informations. L’exemple que je vais vous présenter utilise le framework Mootools mais il est aussi disponible sous d’autres framework (exemple: scriptaculous).
Il faut donc avant de commencer récupérer le script Mootools disponible à cette adresse http://mootools.net/download
Créer un fichier jwscroller.js dont le contenu sera:
var jwscroller = null;
/*
Script: jwscroller.js
Builds a scroll effect to slide
Author: Luca Scarpa,
Project page: http://www.joomlaworks.gr
Copyright (c) 2006 – 2007 JoomlaWorks.gr – http://www.joomlaworks.gr
Arguments:
options – optional, an object containing options.
*/
var JWscroller = new Class({
initialize: function(container, options){
this.container = $(container);
if(!this.container.hasClass(‘hasJWscroller’)){
this.container.addClass(‘hasJWscroller’);
this.slides = [];
this.buttons = [];
this.options = Object.extend({
slidesSelector: « .jwscroller-content »,
buttonsSelector: « .jwscroller-link »,
wrapperSelector: « jwscroller-wrapper »,
nextSelector: « jwscroller-next »,
prevSelector: « jwscroller-prev »,
rotateAction: « click »,
transitionDuration: 500,
startIndex: 0,
buttonOffClass: ‘off’,
buttonOnClass: ‘selected’,
wait: false
}, options || {});
this.currentSlide = -1;
this.slides = this.container.getElements(this.options.slidesSelector);
this.buttons = this.container.getElements(this.options.buttonsSelector);
this.createScroll(this.options.rotateAction);
return this;
} else return false;
},
/*
Property: createScroll
*Private internal function; do not call directly.*
create scroll effect and add action to all link
Arguments:
action – action to give to link
*/
createScroll: function(action){
this.scroll = new Fx.Scroll(this.options.wrapperSelector, { wait: this.options.wait, duration: this.options.transitionDuration});
// Add action to link slide
this.buttons.each(function(el,index){
$(el).addEvent(action, function(event) {
event = new Event(event).stop();
this.selected(index);
}.bind(this));
}, this);
// Add action to next link
//$(this.options.nextSelector).addEvent(action, function(event) { this.next(event); }.bind(this));
// Add action to prev link
//$(this.options.prevSelector).addEvent(action, function(event) { this.prev(event); }.bind(this));
this.selected(this.options.startIndex);
},
/*
Property: next
*Private internal function; do not call directly.*
Progresses to the next slide. */
next: function(event){
event = new Event(event).stop();
current = this.currentSlide;
next = (current+1 >= this.slides.length) ? 0 : current+1;
this.selected(next);
},
/*
Property: prev
*Private internal function; do not call directly.*
Progresses to the prev slide. */
prev: function(event){
event = new Event(event).stop();
current = this.currentSlide;
prev = (current-1 < 0) ? this.slides.length-1 : current-1;
this.selected(prev);
},
/*
Property: selected
*Private internal function; do not call directly.*
Select the slide and add it class */
selected: function(slideIndex){
if(slideIndex!=this.currentSlide){
this.buttons.each(function(el,index){
if(index == slideIndex && index != this.currentSlide){ //show
$(this.buttons[index]).removeClass(this.options.buttonOffClass).addClass(this.options.buttonOnClass);
} else {
$(this.buttons[index]).removeClass(this.options.buttonOnClass).addClass(this.options.buttonOffClass);
}
}, this);
this.currentSlide = slideIndex;
this.scroll.toElement(this.slides[slideIndex]);
}
}
});
//laisser le copyright merci.
Ensuite insérer dans la partie head de votre page:
<script type= »text/javascript » src= »js/mootools.js »></script>
script type= »text/javascript » src= »scripts/jwscroller.js »></script>
<script type= »text/javascript »>
Window.addEvent(‘domready’, function() {
jwscroller = new JWscroller($(‘jwscroller’),{
transitionDuration: 1000,
rotateAction: ‘click’
});
});
</script>
Ensuite dans la partie body:
<div id= »jwscroller »>
<div id= »jwscroller-bar »>
<ul>
<li class= »jwscroller-link »><a><span>Lien 1</span></a></li>
<li class= »jwscroller-link »><a><span>Lien 2</span></a></li>
<li class= »jwscroller-link »><a><span>Lien 3</span></a></li>
</ul>
</div>
<div id= »jwscroller-wrapper »>
<div id= »jwscroller-inner »>
<div class= »jwscroller-content »>
<p>Contenu partie 1</p>
</div>
<div class= »jwscroller-content »>
<p>Contenu partie 2</p>
</div>
<div class= »jwscroller-content »>
<p>Contenu partie 3</p>
</div>
</div>
</div>
</div>
et le tour est joué. Si vous voulez un exemple concret avec en prime une version horizontale et verticale rendez vous à cette adresse: http://www.monsportgagnant.com/
Loading ...
4 Responses to "Slider de news Mootools"
bonjour, c’est EXACTEMENT le type de news que je cherche comme sur le site « monsportgagnant » celui sous le menu, la div qui chasse une autre div… mais je n’arrive pas à le mettre en oeuvre pourtant pas faute d’avoir éssayé!! j’ai bien mon JS mootools ainsi que jwscroller… mais aucune réactions j’ai bien essayé de créer mes propres css (d’aileur il n’y a pas de css dans le tuto?)…sans résultat si une âme charitable pouvait me venir en aide cela très sympa! par avance MERCI!
Bonjour, je voudrais savoir avec quelle version de mootools le script fonctionne.
Merci.
je n’arrive pas a le mettre en oeuvre! comment le faire?
Bonjour à vous trois,
Avez-vous vérifié qu’il n’y a pas d’erreur js ?
Si il ne se passe rien, c’est qu’il y a une erreur, la plus logique quand on récupère des scripts sur internet c’est la version de mootools.
Essayez avec mootools 1.11
Cordialement,