[APORTE] Slider sencillo con Mootools 1.2.4

[jackson666]

Buenasss gente que tal.

Hace rato ya que venia con ganas de hacer algo asi, por mas sencillo que sea, simplifica bastante codigo y es simple de usar =).

Es un slider super sencillo hecho con la ultima version de mootools, que se puede descargar aqui.

Para ver un ejemplo en funcionamiento click aqui

Pongo el codigo y explico su funcionamiento:

1) Para su correcto funcionamiento se debe agregar la siguiente linea antes del siguiente script

Código Javascript:

<script type="text/javascript" src="js/mootools.js"></script>
 

Demas esta decir, que el src varia segun donde tengan ubicado el framework...

slider.js

Código Javascript:

var Slider = new Class({
    
            options: { 
                        duration: 1200, 
                        transition: 'linear', 
                        toggler: 'click',
                        mode: 'horizontal', 
                        auto: false, 
                        delay: false, 
                        stopElement: false, 
                        stopEvent: 'click'
                     },
            
            element: null, back: null, fwd: null, timer: null, 
            
            automatic: function(){
                    
                    var _this = this;
                    var contador = 0;
 
                    var func = function(){
 
                    _this.element.removeEvent(_this.options.toggler);
                    
                   // En realidad las dos comillas simples, no van
                    if(contador '%' 2 == 0){
                        
                    _this.element.addEvent(_this.options.toggler, function(ev){
                    _this.element.set('slide',{
                                              mode : _this.options.mode, 
                                              transition : _this.options.transition, 
                                              duration: _this.options.duration
                                             }).slide('out');
                    });
                    
                    }else{
                        
                        _this.element.addEvent(_this.options.toggler, function(ev){
                        _this.element.slide('in');
                        
                        });
                        
                    }                    
                    
                    _this.element.fireEvent(_this.options.toggler);
                    
                    contador++;
                        
                    }
                    
                    _this.timer = func.periodical(_this.options.delay);                    
                    
            },
            
            setStopper: function(){
 
                var _this = this;
                
                $(_this.options.stopElement).addEvent(_this.options.stopEvent, function(){
                    
                    $clear(_this.timer);
                    
                });
                
            },
            
            initialize: function(elementID, backButtonID, fwdButtonID, config){
                
                    var _this = this;
 
                    if($type(elementID)){ _this.element = $(elementID); }else{ return false; }
                    if(!$type(backButtonID)){ _this.back = $(elementID); }else{ _this.back = $(backButtonID); }
                    if(!$type(fwdButtonID)){ _this.fwd = $(elementID); }else{ _this.fwd = $(fwdButtonID); }
                    
                    if($type(config) == 'object'){
                        for(var i in _this.options){
                            _this.options[i] = config[i];
                        }
                    }
                    
                    if(_this.options.auto == true && $type(_this.options.delay) == 'number'){
                        
                        if(_this.options.stopElement){
                            _this.setStopper();
                        }
                        _this.automatic();
                        
                    }else{
                        _this.back.addEvent( _this.options.toggler, function(ev){
                        ev.stop();
                        _this.element.set('slide',{
                                                  mode : _this.options.mode, 
                                                  transition : _this.options.transition, 
                                                  duration: _this.options.duration
                                                 }).slide('out');
                        });
                        
                        _this.fwd.addEvent(_this.options.toggler, function(ev){
                        ev.stop();
                        _this.element.slide('in');
                        });
                    }
            } 
            
});
 

[jackson666]

Un ejemplo de uso seria

(este es solo un ejemplo de muestra, sin el modo automatico es mas sencillo)

Código Javascript:

var sl = new Slider('elementID', 'accionadorID', 'otroAccionadorID', 
                                                        {
                                                            transition : 'bounce:out',
                                                            duration : 2000, 
                                                            toggler : 'mouseover',
                                                            mode : 'horizontal', 
                                                            auto: true, 
                                                            delay: 2000, 
                                                            stopElement: 'stop', 
                                                            stopEvent: 'click'
                                                        });
 

Donde elementID seria el identificador del elemento que se desea mover

accionadorID seria el identificador del elemento que hace "esconder" al elemento mencionado arriba

otroAccionadorID seria el identificador del elemento que vuelve a "mostrar" el elemento mencionado escondido

Los parametros del objeto options son

duration : duracion del efecto (de la transicion)
transition : tipo de transicion (ver esta pagina)
toggler : evento accionador del efecto (corresponde al elemento pasado, obviamente)
mode : modo, puede ser horizontal o vertical
auto : modo automatico (default: false)
delay : intervalo de tiempo (en ms) para el modo automatico.
stopElement : identificador del elemento que hara que se detenga el modo automatico
stopEvent : evento que hara que se detenga el efecto (asociado con stopElement, obviamente)

Un ejemplo del uso (automatico)

Código HTML:

<html>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">

window.addEvent('domready', function(){

var sl = new Slider('content', null, null, {
                                                            transition : 'bounce:out',
                                                            duration : 2000, 
                                                            toggler : 'mouseover',
                                                            mode : 'horizontal', 
                                                            auto: true, 
                                                            delay: 2000, 
                                                            stopElement: 'stop', 
                                                            stopEvent: 'click'
                                                        });
});
</script>
<style type="text/css">
#slider_container{
    position: relative;
    width: 350px;
    height: 150px;
    background: orange;
    border: 1px solid #000000;
}

#content{
    width: 180px;
    height: 80px;
    background-color: #000000;
    margin: 25px 0 0 75px;
    color: #ffffff;
    text-align: justify;
    padding: 10px;
}
</style>
</head>
<body>
<div id="slider_container">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
    </div>
</div>
<a href="#" id="stop">Detener</a>
</body>
</html> 

Un ejemplo sin el modo automatico

Código HTML:

<html>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){

   var sl = new Slider('content', 'col_izq', 'col_der', {
                                                            transition : 'bounce:out',
                                                            duration : 2000, 
                                                            toggler : 'mouseover',
                                                            mode : 'horizontal', 
                                                        });
});
</script>
<style type="text/css">
#slider_container{
    position: relative;
    width: 350px;
    height: 150px;
    background: orange;
    border: 1px solid #000000;
}

#content{
    width: 180px;
    height: 80px;
    background-color: #000000;
    margin: 25px 0 0 75px;
    color: #ffffff;
    text-align: justify;
    padding: 10px;
}

#col_izq, #col_der{
    position: absolute;
    width: 50px;
    height: 37px;
    top: 0;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #000000;
    font-size: 13px;
    padding: 13px 0 0 0;
    text-align: center;
}

#col_der{ left: 298px; }
</style>
</head>
<body>
<div id="slider_container">
    <div id="col_izq">Ocultar</div>
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
    </div>
    <div id="col_der">Mostrar</div>
</div>
</body>
</html> 

Espero que sirva!

NOTA: en breve le agregare el metodo para volver el efecto al pararlo =)