Modificado por última vez en Lunes, 20 Enero 2014 17:31
(0 votos)

SlideShow con Nivo Slider para tu página web

Nivo Slider es de código abierto y gratuito

Nivo slider homeNivo Slider es un plugin que realiza un SlideShow (transición) de imágenes y lo podemos insertar en cualquier página web. Completamente gratuito y totalmente, no literalmente, de código abierto, no hay mejor manera para hacer que un sitio web tenga un nuevo aspecto totalmente impresionante.

El control deslizante de imágenes Nivo muestra una galería de imágenes con una bonita experiencia y sorprendentes efectos de transición que van desde corte y deslizamiento a decoloración y plegado.

El SlideShow Nivo fue diseñado para ser muy simple de usar y configurar. Con un poco de HTML y Javascript, puedes hacer un control deslizante de imágenes que funcione en cuestión de minutos. Sin embargo, esto no significa que no puedas ajustar el contenido del core con una gran cantidad de configuraciones y estilo que el uso de CSS.

Nivo Slider es de código abierto y liberado bajo la licencia MIT. Esto significa que puedes utilizarlo casi en cualquier lugar y para casi cualquier tipo de proyecto, incluidos los sitios web personales y comerciales y los temas hagas. También significa que puedes pasarte por la comunidad contribuyendo con tus propias mejoras del plugin a través de GitHub.

Para la instalación del plugin Nivo yo he creado una nueva y sencilla página en un dominio que se llama Wave-ola.es (donde podéis ver el ejemplo de Nivo slider trabajando) con un archivo index.html en HTML simple.

Primero deberemos crear en la raíz del servidor tres carpetas llamadas images, js y styles para alojar los diferentes archivos del plugin:

estructura de carpetas para Nivo slider

En el directorio raíz subiremos también nuestro archivo index.html personalizado (Si alguien quiere ver el código lo puede hacer pulsando botón derecho del ratón en el fondo de la página y elegir ver código fuente).

Para que el plugin Nivo funcione necesitaremos la librería de jQuery, que descargaremos para obtener el archivo jquery-1.7.2.min.js (aquí lo podéis obtener en .zip).

Luego descargaremos desde la web de Nivo el plugin Nivo slider (elegir el gratuito, que dice Free).

El archivo está comprimido en .zip, si lo descomprimimos veremos su contenido:

Nivo slider descomprimido

Ahora copiaremos el archivo "jquery.nivo.slider.pack.js" a la carpeta /js mientras que el archivo "nivo-slider.css" a nuestra carpeta /styles.

Luego ingresamos en la carpeta themes/default:

Nivo slider carpeta themes/default

Las imágenes arrows.png, bullets.png y loading.gif los copiamos en la carpeta /images de nuestra página. El archivo default.css lo copiamos en la carpeta /styles.

Ahora ingresamos en la carpeta demo/images:

Nivo slider carpeta demo/images

Copiamos las 4 imágenes .jpg a la carpeta /images de nuestro servidor.

A continuación editaremos el archivo index.html, en mi caso lo he construido con la siguiente estructura HTML:

 

<!DOCTYPE html>
<head>
<title>Wave ola, páginas web personalizadas</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head> <body>
<h1><strong>Wave ola</strong><br><strong>Creación de páginas web
personalizadas</strong></h1> <div class="content"> <hr />
<div class="content-columns">
<div class="content-column-left">
<h2>If you are a member of the general public:</h2> <p>The fact that you are seeing this page indicates that the website
you just visited is either experiencing problems or is undergoing
routine maintenance.
</p> <p>If you would like to let the administrators of this website know that
you've seen this page instead of the page you expected, you should
send them e-mail. In general, mail sent to the name "webmaster"
and directed to the website's domain should reach the appropriate person.
</p> <p>For example, if you experienced problems while visiting wave-ola.es,
you should send e-mail to "Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.".
</p>
</div> <div class="content-column-right">
<h2>If you are the website administrator:</h2> <p>You may now add content to the directory <tt>/var/www/html/</tt>.
Note that until you do so, people visiting your website will
see this page and not your content. To prevent this page from ever being used,
follow the instructions in the file <tt>/etc/httpd/conf.d/welcome.conf</tt>.
</p> <p>You are free to use the images below on Apache and
CentOS Linux powered HTTP servers. Thanks for using Apache and CentOS!
</p> </div>
</div>
</div> </div>
<div class="youtube">
<a href="https://www.varnish-cache.org/">
<img src="/varnish-cache-logo.png" alt="[ Optimiced by Vartnish cache ]"
width="83" height="31" /></a>
<a href="http://httpd.apache.org/">
<img src="/apache_pb.gif" alt="[ Powered by Apache ]" width="259" height="32"/>
</a>
<a href="http://www.centos.org/">
<img src="/poweredby.png" alt="[ Powered by CentOS Linux ]"
width="88" height="31" /></a>
</div> </body>
</html>

Entre de las etiquetas <head> y </head> pondremos lo siguiente:

 

<link rel="stylesheet" href="/styles/nivo-slider.css" type="text/css"
media="screen" /> <link rel="stylesheet" href="/styles/default.css" type="text/css"
media="screen" /> <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="/js/jquery.nivo.slider.pack.js" type="text/javascript"> </script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>

Y dentro de las etiquetas <body> </body> donde queramos poner nuestro SlideShow:

 

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
<img src="/images/toystory.jpg" alt="" />
<a href="http://wave-ola.es/">
<img src="/images/up.jpg" alt="" title="This is an example of a caption" /></a>
<!--Imagen link con titulo simple--> <img src="/images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="/images/nemo.jpg" alt=""
title="<strong>Este</strong> es un ejemplo de título en <em>HTML</em>
con <a href='#'>un link</a>" />
<!-- Imagen con título en html --> </div> </div> </div>

Falta que se vean los bullets.jpg y los arrows.jpg, esto es debido a que hemos cambiado la ubicación de estas imágenes a otra carpeta. Para arreglar esto vamos a editar el archivo styles/default.css:

 

.theme-default .nivoSlider {
     width: 618px; /* agregamos esta línea */
     position:relative;
     background:#fff url(.../images/loading.gif) no-repeat 50% 50%;
     margin: 0 auto;
     -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
     -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
     box-shadow: 0px 1px 5px 0px #4a4a4a;
 }
.theme-default .nivo-controlNav a {
     display:block;
     width:22px;
     height:22px;
     background:url(../images/bullets.png) no-repeat;
     text-indent:-9999px;
     border:0;
     margin-right:3px;
     float:left;
 }
 .theme-default .nivo-directionNav a {
     display:block;
     width:30px;
     height:30px;
     background:url(../images/arrows.png) no-repeat;
     text-indent:-9999px;
     border:0;
 }

Parámetros de NivoSlider();

A continuación veremos los parámetros que se le pueden pasar a la función nivoSlider():

 

<script type="text/javascript">
 $(window).load(function() {
  $('#slider').nivoSlider({
  slices: 15, // Cantidad de cortes de dicho efecto
  boxCols: 8,
  boxRows: 4,
  animSpeed: 200, // Velocidad de la transición
  pauseTime: 3000, // Tiempo de espera para mostrar otra transición
  startSlide: 0, // Orden de imagen a mostrar cuando se carga el slider (0=index)
  directionNav: true, // Permite true/false la navegación manual, usando los arrows
  directionNavHide: true, // Muestra los arrows sólo cuando el cursor esté sobre el slider.
  controlNav: true, // 1,2,3... Permite navegar usando los bullets de la parte inferior.
  keyboardNav: true, // Usa las flechas izquierda y derecha del teclado
  pauseOnHover: true, // Detener la transición cuando el cursor esté sobre el Slide
  manualAdvance: false, // Forzar a que sea sólo manualmente la transición
  captionOpacity: 0.8, // Opacidad del caption
  prevText: 'Prev',
  nextText: 'Next',
  randomStart: false, // Inicio de una transición al azar
  beforeChange: function(){}, // Se ejecuta o activa antes de una transición
  afterChange: function(){}, // Se ejecuta o activa después de una transición
  slideshowEnd: function(){}, // Se ejecuta o activa después de que todas las imágenes hayan sido mostradas
  lastSlide: function(){}, // Se ejecuta o activa después que la última imagen ha sido mostrada
  afterLoad: function(){} // Se ejecuta o activa cuando el slider ha sido cargado
});
});
</script>

A lo largo de mañana modificaré el texto que está en inglés en la página de Wave-ola.es


Comentarios (2)

  1. lilolaleilo

Hola, gracias por las explicaciones. Tengo una pregunta. Encima de la imagen, se puede poner cualquier texto tras title=..../>, pero tiene un sombreado muy negro, que tapa mucho la imagen que aparece debajo. Me gustaría saber cómo poder cambiar...

Hola, gracias por las explicaciones. Tengo una pregunta. Encima de la imagen, se puede poner cualquier texto tras title=..../>, pero tiene un sombreado muy negro, que tapa mucho la imagen que aparece debajo. Me gustaría saber cómo poder cambiar este sombreado del texto, para cambiarlo por ejemplo a un gris claro, para que se distinga la imagen de debajo más.
GRACIAS

Leer más
  Archivos adjuntos
 
  1. Jesús Cáceres

Es cosa de los archivos CSS, mira estos que tengo yo:
http://wave-ola.es/styles/default.css
http://wave-ola.es/styles/nivo-slider.css
y ajusta el background y los demás colores

  Archivos adjuntos
 
No hay comentarios escritos aquí

Deja tus comentarios

Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
0 Caracteres
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana de FeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento