Slidertron con JQuery: Cómo instalar el slider en una página web

4 agosto 2012 § Deja un comentario

BubbleObjetivo: Instalar un Slider en una página web haciendo uso de librerías de JQuery previamente confeccionadas por sus creadores.

Con el Slider lograremos obtener una página web más interesante y atractiva, además de ofrecer un entorno con mayor interacción por parte del usuario.

Un slider en una página web es un elemento de la interfaz gráfica que tiene por objeto establecer valores según el usuario seleccione convenientemente. El ejemplo típico es el de las imágenes que cambian a medida que el usuario pulsa un determinado botón.

Partiremos de una estructura de página con HTML y CSS muy sencilla en donde instalaremos un Slider con imágenes. Nos centraremos en la instalación del Slider con JQuery aunque para que se entienda mejor daremos algunas indicaciones de otros elementos.

Paso 1:  Preparemos los documentos HTML y CSS iniciales 

Para los preparativos de nuestro ejercicio, hemos abierto un documento nuevo HTML que llamamos “index.html” y creado una carpeta “css” donde incluiremos nuestro fichero de estilos, por ejemplo “mystyle.css”. Entre las etiquetas <head> y </head> del encabezado de la página hemos escrito la línea del enlace entre ambos documentos con:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”css/mystyle.css” />

Trabajamos en el documento “index.html”, y cada caja que vemos en el navegador la hemos logrado con un “div” así:

Para darle estilos a las cajas, hemos identificado con “id” cada caja de tal manera que en el fichero “css/mystyle.css” tenemos lo que a continuación indicamos.

Comenzamos por los estilos de toda la página:

Hemos establecido un ancho de página de 960px y para que nos quede centrada en la pantalla hemos establecido los márgenes izquierdo y derecho en auto.

Buscando la simplicidad del ejercicio, hemos establecido sólo el color de fondo para el encabezado así:

Como vamos a trabajar con nuestro Slider, hemos dejado la caja sin estilos para escribirlos posteriormente:

Para las cajas del contenido de la página establecemos los siguientes selectores, propiedades y valores que se indican:

Como queremos que las dos cajas de contenido de la página ocupen posiciones, una a la izquierda y otra a la derecha, incorporamos un float y también establecemos que cada caja ocupe la mitad de la anchura de la página.

Para el pie de la página, y por simplicidad del ejercicio, nuevamente sólo establecemos el color del fondo:

Incorporamos un “clear:  both” para que la caja se posicione en un espacio vacío a continuación de la estructura de la página.

Con todo lo anterior ya tenemos nuestro esquema organizado de la página tanto en HTML como en código CSS. En el navegador, el esquema inicial de nuestra página web es, por ejemplo, el siguiente:

Vemos en esta página el siguiente esquema:

– una caja para el encabezado (header)

– una caja reservada para el Slider

– dos cajas para contenidos (content1 y content2) de la página

– una caja para el pie (footer)

Paso 2: Localicemos los ficheros JQuery que nos permitan el Slider

Para el Slider necesitaremos ficheros “js” y por lo tanto creamos en nuestro árbol de ficheros de la página web una nueva carpeta que podemos llamar simplemente “js”, y dentro de ella ubicaremos nuestros ficheros JQuery.

Comenzamos por la librería básica de JQuery que descargamos de la página oficial http://jquery.com/

La versión a la fecha es la V1.7.2. Pulsamos sobre el botón “Download (jQuery);” y descargamos el fichero. Si en vez de la descarga del fichero, en el navegador se muestra el código, copiamos y pegamos todo el contenido en un fichero con el mismo block de notas que podemos llamar  “jquery-1.7.2.min.js” como se muestra:

Si descargamos el fichero en “zip”, antes debemos descomprimir el fichero y luego lo colocamos en la carpeta “js”.

Ahora para que no se nos olvide, en el documento “index.html”,  escribimos la línea de código que enlazará el documento HTML con el fichero “jquery-1.7.2.min.js” así:

<script type=”text/javascript” src=”js/jquery-1.7.2.min.js”></script>

Observar que la ruta al fichero “js” debe ser la correcta para nuestro árbol de ficheros de la página web (dentro de la carpeta “js” que creamos para los ficheros de JQuery). Esta línea irá a continuación de la línea que enlaza con “mystyle.css” y entre las etiquetas de apertura y cierre de “head”.

Ahora vamos a localizar el fichero específico del Slider. En Internet hay gran variedad de plugin para instalar Sliders en páginas web. Hemos seleccionado el que ha diseñado “NoDeThirtyThree” que ofrece en la siguiente dirección: http://nodethirtythree.com/jquery/

Descargamos el plugin JQuery “jquery.slidertron-1.1.zip” desde el siguiente enlace:

Como el fichero se descarga en formato “zip”, lo descomprimimos, seleccionamos el fichero “jquery.slidertron-1.1.js” y lo ubicamos en nuestra carpeta “js” del árbol de nuestra página web. El fichero “zip” contiene suficiente documentación sobre instrucciones y ejemplos, recomendamos darle un vistazo.

De inmediato y para evitar el olvido, escribimos en el documento “index.html” la línea del código que enlazará con el fichero JQuery del Slider, entre las etiquetas de apertura y cierre del “head” de la página web, así:

<script type=”text/javascript” src=”js/jquery.slidertron-1.1.js”></script>

Observar que la ruta al fichero “js” debe ser la correcta para nuestro árbol de ficheros de la página web (dentro de la carpeta “js” que creamos”).

Ahora necesitamos “construir” el fichero “js” que llame a la función que activará el Slider de JQuery. Vamos a llamarlo “myslider.js” y utilizamos el block de notas para escribir el siguiente código:

/* Definir la función que activa el Slider */

$(function() {
$(‘#slider’).slidertron({
viewerSelector: ‘.viewer’,
indicatorSelector: ‘.indicator span’,
reelSelector: ‘.reel’,
slidesSelector: ‘.slide’,
speed: ‘slow’,
advanceDelay: 4000
});
});

Luego ubicamos este fichero “myslider.js” en nuestra carpeta de ficheros de JQuery. Además, como hemos hecho en los casos anteriores escribimos la línea de código correspondiente en el documento “index.html” así:

<script type=”text/javascript” src=”js/myslider.js”></script>

Antes de proseguir, vamos a comprobar lo que tenemos hasta ahora. El árbol de nuestra página web debe mostrarse como la siguiente imagen:

En nuestro árbol tenemos un documento HTML (index.html) y dos carpetas, la carpeta “css” para los estilos (incluye un solo fichero) y la carpeta “js” para los ficheros JQuery (con tres ficheros “js”).

También, en nuestro documento “index.html” hemos incluido las líneas correctas que enlazan este documento con los ficheros “css” y “js” como se ve en la siguiente imagen:

Observar que la ruta al fichero de estilos especifica la carpeta “css” que lo contiene y la ruta de los ficheros “js” especifica la carpeta del árbol que los contiene.

Paso 3: Configurar el Slider en nuestra página web 

En CSS

Necesitamos , o bien agregar los estilos para el slider a nuestro fichero de estilos que ya tenemos (en “mystyle.css”), o bien crear un nuevo fichero de estilos exclusivo para el Slider. Vamos a proceder con la segunda opción pues facilitará la manipulación del Slider independientemente de los otros estilos de la página.

Creamos el fichero “sliderstyle.css” para los estilos del Slider y escribimos en el block de notas el siguiente código:

/* Estilos del Slider */

#slider {

            position: relative;

            margin: auto;

            width: 960px;

            margin-top: 50px;

} 

#slider .viewer {

            width: 960px;

            height: 250px;

            border: solid 1px #D4D4D4;

            border-radius: 3px;

} 

#slider .slide {

            width: 960px;

            height: 250px;

            padding: 10px;

} 

#slider .indicator {

            position: relative;

            z-index: 1;

            text-align: center;

            margin: 20px 0 20px 0;

} 

#slider .indicator span {

            display: inline-block;

            text-indent: -9999em;

            width: 12px;

            height: 12px;

            background: #E3DFDF;

            border-radius: 6px;

            margin: 0 2px 0 2px;

} 

#slider .indicator span.active {

            background: #6E6E6E;

}

Como vemos en el código, el Slider ocupará todo el ancho de nuestra página (960px) y una altura de 250px, lo cual es importante para tener en cuenta en el tamaño de las imágenes que formarán parte del Slider.

El fichero “sliderstyle.css” también lo ubicamos en la carpeta de estilos “css” de nuestro árbol de ficheros de la página web.

En HTML

En nuestro documento HTML tendremos que incorporar el siguiente código en la caja reservada para el Slider, así:

<div id=”slider”><!–Inicio de Slider –>

<div class=”viewer”><!–Inicio de visor –>

<div class=”reel”>

<div class=”slide”>

<img src=”images/slider01.jpg” alt=”Imagen 01″ /></div>

<div class=”slide”>

<img src=”images/slider02.jpg” alt=”Imagen 02″ /></div>

<div class=”slide”>

<img src=”images/slider03.jpg” alt=”Imagen 03″ /></div>

<div class=”slide”>

<img src=”images/slider04.jpg” alt=”Imagen 04″ /></div>

<div class=”slide”>

<img src=”images/slider05.jpg” alt=”Imagen 05″ /></div>

</div>

</div><!–Fin de visor –>

<div class=”indicator”><!–Inicio de botones –>

<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>5</span>

</div><!–Fin de botones –>

</div><!–Fin de Slider –>

Las imágenes

Ahora creamos la carpeta de las imágenes del Slider en el árbol de la página web (llamaremos “images”) y ubicamos en ella las 5 imágenes que mostrará nuestro Slider. Cada imagen tendrá las siguientes dimensiones:

Anchura: 940px

Altura: 230px

La idea es que la anchura del visor del Slider es de 960px, tiene un padding de 10px por cada lado (izquierda-derecha), entonces la imagen tendrá como anchura: 960px-20px = 940px. En cuanto la altura, similarmente, 250px -20px = 230px.

Para este tutorial, hemos descargado algunas fotografías del banco de imágenes de Stock en http://www.sxc.hu/

Una vez ajustadas las imágenes al tamaño de nuestro Slider (cada imagen de 940px de ancho y 230px de alto) las ubicamos en la carpeta de “images”. Para nuestro Slider hemos considerado 5 fotografías, pero podemos adaptarlo a las condiciones de nuestro proyecto (esto sólo requiere añadir más código en el documento HTML). También, podemos cambiar los estilos del Slider según nos interese (por ejemplo, color y anchura del borde del visor, forma de las esquinas del visor, tamaño de las imágenes, márgenes …), es cuestión de ensayar.

Paso 4: Comprobación del funcionamiento del Slider

Antes de pasar al navegador es conveniente comprobar que cada elemento está en su sitio. Veamos, el resultado del árbol de nuestra página web:

La carpeta “css” contiene los ficheros de los estilos de la página y de los estilos del Slider.

La carpeta “images” contiene las 5 fotografías que expondrá el Slider, cada una con la misma medida que establecimos.

La carpeta “js” incluye los 2 ficheros de JQuery y el fichero de llamada de la función del Slider en nuestra web.

Comprobamos también que el código está correcto en los ficheros que hemos creado. Asimismo, los enlaces a los ficheros deben tener la ruta exacta. El documento HTML final muestra los enlaces a 2 ficheros CSS y 3 ficheros JS:

Desde el navegador invocamos el documento HTML “index.html” y podemos comprobar el funcionamiento del Slider. La captura de pantalla resulta una imagen como la siguiente:

Ver la demo en http://misdemos.net78.net/Slidertron/index.html 

Nota: En el fichero de los estilos del Slider (sliderstyle.css), hemos aumentado el margen superior y también el margen inferior de los botones (“indicator”), para que de esta  manera pueda  “respirar” mejor el Slider.

Ya tenemos nuestro Slider en marcha.

Mi Slider no funciona, ¿qué puede pasar?

Comprueba que todos y cada uno de los ficheros “css” y “js” están en el lugar indicado y que son invocados con la ruta exacta.  Es importante verificar que la extensión del fichero sea la correcta (el block de notas puede “confundirnos”). También verificar la escritura del código en el caso de haberlo modificado. Nos podemos ayudar con la documentación original del Slider de donde hemos descargado el zip.

¿Puedo cambiar el tamaño de las imágenes?

Claro que sí, pero toma en cuenta las medidas para el visor del Slider, así como también el espacio entre las imágenes y el borde del visor (padding) en el fichero de estilos del Slider.

¿Hay otras formas para presentar el mismo Slidertron?

Sí, en la carpeta “docs” del zip original del Slider encontrarás ejemplos y ficheros de estilo adecuados para hacer los cambios que más se adapten a tu proyecto.

Anuncios

Etiquetado:, , , , ,

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

¿Qué es esto?

Actualmente estás leyendo Slidertron con JQuery: Cómo instalar el slider en una página web en Instalar en el PC. Tutoriales paso a paso..

Meta