Como ya sabemos, jQuery es de las más potentes y utilizadas librerías de Javascript, hoy en día reconocida como el propio framework de Javascript que sin duda se caracteriza por las funciones y eventos que implementa en este lenguaje, haciendo un marco de trabajo más preciso para quienes programan en él.
jQuery nos proporciona gran facilidad al escribir código, ya que es tan sencillo, que podemos realizar grandes proyectos en tan poco tiempo.
Desarrollando un Slider plugin básico.
En este tutorial vamos a desarrollar un slider bastante sencillo en el que las imágenes se desplazaran de manera horizontal cada 4 segundos y tendrá sus respectivos navegadores.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<title>Slider</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
//jQuery
$(document).ready(function() {
//Slider
$("#slider").Slider();
});
</script>
</head>
<body>
<div class="container">
<div id="slider">
<figure>
<img src="img/1.jpg" title="Esta es la primera prueba">
<figcaption>
<h2><a href="#">Prueba uno</a></h2>
<p>Descripción Imagen de prueba uno</p>
</figcaption>
</figure>
<figure>
<img src="img/2.jpg" title="Esta es la segunda prueba">
<figcaption>
<h2><a href="#">Prueba dos</a></h2>
<p>Descripción Imagen de prueba dos</p>
</figcaption>
</figure>
<figure>
<img src="img/3.jpg" title="Esta es la tercera prueba">
<figcaption>
<h2><a href="#">Prueba tres</a></h2>
<p>Descripción Imagen de prueba tres</p>
</figcaption>
</figure>
</div>
</div>
</body>
</html>
Como ven no es nada del otro mundo, un documento html como cualquier otro. Llamamos el archivo .css que contiene los estilos, las librerías jquery desde google, el archivo .js de nuestro plugin y en el script indicamos que en el momento en que se cargue la pagina se ejecute nuestro pugin Slider() en el div con id slider.
Aquí podemos ver que las imágenes y su titulo y descripción, son incluidas directamente en nuestro archivo HTML con el uso de la etiqueta figure de HTML5.
Ahora vamos a darle estilo.
style.css
.container{
width:530px;
margin:0 auto;
}
#slider{
width:530px;
height:260px;
float:left;
margin-top:10px;
margin-right:10px;
box-shadow:3px 3px 4px rgba(187, 187, 187, 0.65);
}
el container es el div que contiene al div id slider y lo centra en el navegador.
.slider-container{
width:100%;
float:left;
}
.wrapper{
position:relative;
margin:0 auto;
overflow:hidden;
}
los divs slider-container y wrapper serán creados con el jquery.
.wrapper figure{
margin:0;
}
.wrapper figure figcaption{
width:100%;
position:absolute;
bottom:0px;
background:#000;
opacity:0.5;
color:#eee;
}
.wrapper figure figcaption h2{
font-size:20px;
margin-left:20px;
font-weight:bold;
}
.wrapper figure figcaption a{
color:#eee;
}
.wrapper figure figcaption p{
margin-left:20px;
}
Le damos estilos a la etiqueta figure y a los elementos que contiene.
.nav{
position:relative;
margin:0 auto;
}
.nav a{
background:#222;
color:#eee;
padding:0px 5px 0px 5px;
margin-right:2px;
border-radius:2px;
}
Esta clase es para el navegador que sera generado con el js y permitirá que se navegue entre las imágenes.
a.prev,
a.next {
position: absolute;
top: 50%;
background:#222;
padding:2px;
border-radius:2px;
color:#eee;
}
a.next {
right: 0;
}
Las clases prev y next son para enlaces que también serán generados con el jquery y sirven para ir a la imagen anterior o a la siguiente respectivamente.
Vamos con el jQuery, aquí es donde se pone realmente interesante. Analicemos por partes.
slider.js
(function($){
$.fn.Slider=function(options){
var opt={
'width':530,
'height':239,
'auto':true,
'autoSpeed':4000,
'fadeSpeed':1000
};
Primero colocamos las opciones predeterminadas en la variable:
width: para el ancho del wrapper.
height: para el alto del wrapper.
auto: para determinar si comenzara a pasar las imágenes automáticamente
autoSpeed: el intervalo de tiempo en que cambian las imágenes
fadeSpeed: la velocidad a la que se desvanece o aparece cada imagen al cambiar.
this.each(function(){
if(options){
$.extend(opt,options);
}
$(this).children().wrapAll('<div class="slider-container"/>');
container=$(this).find('.slider-container');
container.find('figure').wrapAll('<div class="wrapper"/>');
var wrapper=$(this).find('.wrapper');
wrapper.append('<a href="#" class="prev">Prev</a><a href="#" class="next">Next</a>');
container.append('<div class="nav">');
var nav=container.find('.nav');
wrapper.find('figure').each(function(i){
i+=1;
nav.append('<a href="#">'+i+'</a>');
});
Ahora hemos creado el elemento wrapper para que contenga los elementos figure y el elemento slider-container que contendrá al elemento wrapper.
Por medio de la función append(), hemos creado los enlaces prev y next. dentro del wrapper y dentro del slider container hemos creado un nuevo div de clase nav que contendrá el navegador de las imágenes.
Como vemos se crea una función que cuenta la cantidad de elementos figure dentro del wrapper y guarda un numero en la variable i por cada una de ellas y luego crea enlaces dentro del div nav con cada numero.
var Slider=function(){
this.figures=wrapper.find('figure');
this.figuresList=(this.figures.length)-1;
this.navPrev=wrapper.find('a.prev');
this.navNext=wrapper.find('a.next');
this.bullets=container.find('.nav a');
this.caption=this.figures.find('figcaption');
Ahora pasamos a crear el objeto Slider y sus atributos y métodos.
this.figures: guardara los elementos figure como un array.
this.figurestList: cuenta la cantidad de elementos figure.
this.navPrev y this.navNext son obviamente los navegadores de anterior y siguiente.
this.bullets: guarda los enlaces del navegador de imágenes en un array.
this.caption: guarda los elementos figcaption de cada elemnto figure en un array.
this.getCurrentIndex = function(){
return this.figures.filter('.current').index();
};
Método getCurrentIndex: Obtiene el elemento figure que esta visible
this.go=function(index){
this.figures
.removeClass('current')
.fadeOut(opt.fadeSpeed)
.eq(index)
.fadeIn(opt.fadeSpeed)
.addClass('current');
this.bullets
.removeClass('current')
.eq(index)
.addClass('current');
};
Metodo go: Primero le quita la clase current al elemento figure que está visible y lo desvenase luego selecciona el siguiente a través del parámetro index, lo muestra y le agrega la clase current. También verifica el enlace de la imagen en el div nav que corresponde al figure, le quita la clase current, selecciona al siguiente y le agrega la clase current.
this.next=function(){
var index=this.getCurrentIndex();
if(index<this.figuresList){
this.go(index+1);
}else{
this.go(0);
}
};
this.prev=function(){
var index=this.getCurrentIndex();
if(index>0){
this.go(index-1);
}else{
this.go(this.figuresList);
}
};
Métodos next y prev: primero verifican que figure esta visible luego, utilizando un condicional, el método next verifica que el figure actual sea menor que el total de elementos figure; si es el caso, se llama al método go pasándole como parámetro el figure actual mas uno, en caso contrario se le pasara al método go el parámetro 0. En el caso del método prev se verifica que el figure actual sea mayor que 0 y si es así se le pasa como parámetro al método go el index menos uno, osea, el numero de figure actual menos uno y en caso contrario se le pasa el parámetro this.figurestList que como sabemos es la cantidad total de figures que contiene el div slider.
this.init=function(){
wrapper
.width(opt.width)
.height(opt.height);
this.figures.hide().first().addClass('current').show();
this.bullets.first().addClass('current');
var padding = wrapper.css('padding-left').replace('px', '');
nav.width(opt.width);
};
};
Metodo init: Este es el método que le da vida a nuestro slider, vamos a verlo por partes
1) Le decimos que le aplique las opciones de width y height (ancho y alto) al div clase wrapper.
2) Ocultamos los elementos figure con excepción del primero al cual le daremos la clase current y lo mostraremos.
3) le agregamos laclase current al primer enlace que esta dentro del div clase nav
4) le pasamos la opción de width (ancho) al div clase nav
var slider=new Slider();
slider.init();
Ahora se instancia el objeto Slider() y se llama al método init.
slider.navNext.click(function(e){
e.preventDefault();
slider.next();
});
slider.navPrev.click(function(e){
e.preventDefault();
slider.prev();
});
slider.bullets.click(function(e){
e.preventDefault();
slider.go($(this).index());
});
Eventos del mouse.
al darle click al enlace clase next llamamos al método next de la clase Slider. lo propio sucede al hacer click sobre el enlace clase prev pero en este se llama al método prev.
Al darle click a alguno de los enlaces que están dentro del div nav se llama al método go y se le pasa como parámetro el index del mismo enlace.
if(opt.auto===true){
var timer=function(){
slider.next();
};
var interval=setInterval(timer,opt.autoSpeed);
wrapper.hover(function(){
clearInterval(interval);
},function(){
interval=setInterval(timer, opt.autoSpeed);
});
slider.bullets.click(function(){
clearInterval(interval);
interval=setInterval(timer,opt.autoSpeed);
});
}
});
};
})(jQuery);
El bucle del plugin
Ahora verificmos que la opción auto sea verdadera y en este caso definimos una función timer que llamará al método next de la clase Slider y a continuación creamos un bucle con setInterval que repetirá la función timer (llamada al metodo next de la clase Slider) cada tanto tiempo (el tiempo es definido en la opción autoSpeed, en este caso 4 segundos).
la siguiente función nos dice que al pasar el mouse sobre el div clase wrapper se detendra el bucle y al quitarlo se reiniciará.
Y por ultimo al hacer click sobre cualquier enlace dentro del div clase nav, también se detendrá el bucle.
Este es un plugin sencillo desarrollado para que hasta el mas novato puede entender que estamos haciendo y es una buena base para integrar mas funciones y desarrollar algo más profecional.
Espero que haya sido de ayuda y tienen permiso de copiarlo, modificarlo y distribuirlo sin ningún problema, aunque agradecería una referencia al autor XD.
