Para los que nos dedicamos al desarrollo y diseño de aplicaciones para Internet nos ha sorprendido la rapidez con la que se han propagado los slideshows (también llamados sliders). No hay web actual que se precie que no tenga uno. ¿Y qué es y para qué sirve? Se trata de un componente que presenta una serie de imágenes ordenadas con información seleccionada, que se van presentando una tras otra manteniendo cada una visible un breve periodo de tiempo. Estas imágenes representan una información seleccionada que queremos destacar y pueden incluir un enlace a dicha información ampliada e incluso una etiqueta con una breve descripción. Es muy útil en páginas muy densas con mucha información para, en el mismo espacio, destacar más de un tema.
Existen multitud de estos componentes dependiendo de la funcionalidad que incorporan. En nuestro caso, para una nueva web, el usuario nos pidió incorporar un sencillo slideshow y nos hemos decantado por Nivo Slider. Incorpora 16 efectos de transición, soporta enlaces a imágenes y navegación entre imágenes mediante teclado. Su utilización es sencilla y la versión empaquetada sólo ocupa 15Kb. por lo que se agradece su ligereza. Es un código de libre uso bajo la licencia MIT. Funciona en los siguientes navegadores:
- Internet Explorer v7+
- Firefox v3+
- Google Chrome v4+
- Safari v4+
- Opera v10+
Para usarlo en nuestros proyectos necesitamos incluir jQuery, el script de Nivo Slider (jquery.nivo.slider.pack.js) y el CSS de Nivo Slider (nivo-slider.css). Además necesitamos añadir un poco de código HTML a nuestra página. Suele ser un div con imágenes (images), de hecho, sólo imágenes o imágenes dentro de enlaces están permitidas dentro del div que representa el slider. Cualquier otro código HTML hará que no funcione el control.
<!-- Dentro de la sección <body> de la página -->
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com">
<img src="images/slide2.jpg" alt="" title="#htmlcaption"/>
</a>
<img src="images/slide3.jpg" alt="" title="Este es un ejemplo de un caption"/>
<img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>Esto</strong> es un ejemplo de un caption <em>HTML</em> con <a href="#">un enlace</a>.
</div> Para que el slider se vea correctamente mientras está cargando añadiremos algo de estilos CSS:
#slider { position:relative; width:618px; /* Change this to your images width */
height:246px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img { position:absolute;
top:0px; left:0px; display:none;
}
#slider a { border:0; display:block; }Para enlazar la funcionalidad del slider con la capa que hemos cargado previamente cuando cargamos la página, llamamos al método nivoSlider() de la siguiente forma:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script> Este método puede invocarse sin parámetros o bien con alguna de las opciones disponibles:
$('#slider').nivoSlider({
effect:'random', // Efecto de transición: 'fold,fade,sliceDown'
slices:15, // Para animaciones 'slice'
boxCols: 8, // Para animaciones 'box'
boxRows: 4, // Para animaciones 'box'
animSpeed:500, // Velocidad de la transición
pauseTime:3000, // Cuánto tiempo en milisegundos se visualiza una imagen
startSlide:0, // Imagen de comienzo (empezando por cero)
directionNav:true, // Si queremos que aparezcan controles para siguiente y anterior
directionNavHide:true, // Sólo cuando el cursor se sitúa sobre el componente
se visualizará la navegación
controlNav:true, // 1,2,3... navegación
controlNavThumbs:false, // Usar miniaturas para el control de la navegación
controlNavThumbsFromRel:false, // Usar imagen rel para miniaturas
controlNavThumbsSearch: '.jpg', // Reemplazar este patrón del nombre de la imagen...
controlNavThumbsReplace: '_thumb.jpg', // ...con esto para las imágenes miniatura
keyboardNav:true, // Usar las flechas izquierda y derecha para navegación
pauseOnHover:true, // Parar navegación al pasar el ratón sobre el componente
manualAdvance:false, // Forzar transiciones manuales
captionOpacity:0.8, // Opacidad para los caption o títulos de las imágenes
prevText: 'Ant', // Texto de navegación hacia la izquierda
nextText: 'Sig', // Texto de navegación hacia la derecha
beforeChange: function(){}, // Función que se ejecuta antes de una transición
afterChange: function(){}, // Función que se ejecuta después de una transición
slideshowEnd: function(){}, // Función que se ejecuta después de que todas
las imágenes se han mostrado
lastSlide: function(){}, // Función que se ejecuta cuando la última imagen se visualiza
afterLoad: function(){} // Función que se ejecuta cuando se carga el componente
});
Hay gran variedad de efectos para las transiciones. Los valores posibles para la opción effect son: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse,boxRainGrow, boxRainGrowReverse. Para un uso avanzado, incluir Nivo Slider en WordPress o el uso de imágenes miniatura, podemos visitar la página oficial http://nivo.dev7studios.com/.
Una respuesta a “Nivo Slider, un slideshow con jQuery”
como ampliar la imagen que está en transicion?, quizas puede ser con la funcion afterchange() pero no entiendo mucho :/