Clicky

Rotador de imágenes en CSS/jQuery con descripciones

rotador automático de imágenes

Con rotación automática entre las diapositivas

Este tutorial fue creado originalmente por Soh Tanaka y publicado en 2009. Desafortunadamente su demo ya no está en línea y me las arreglé para encontrar una vieja copia de los códigos fuente. La gente en los comentarios han estado pidiendo la rotación automática entre las diapositivas y se han actualizado los códigos con esta característica.

Así que en este tutorial se reintroducen algunos de los códigos originales de Soh sobre cómo construir este rotador automático dinámico. El jQuery está contenido dentro del mismo archivo index.html y es fácil de seguir adelante. También se debe trabajar ejecutando la última copia de jQuery de su sitio web. No dudes en descargar una copia de los códigos fuente actualizados o visita la demostración en vivo en los siguientes enlaces:

Live Demo "“ Download Source Code

Este tutorial es una traducción de "Create a CSS/jQuery Image Rotator with Descriptions" por Jake Rocheleau

Introducción

En primer lugar tenemos que crear un nuevo documento index.html que contiene el control deslizante y el JavaScript. Se incluye una copia local de jQuery, pero en su lugar también podría utilizarse la versión de CDN-hosted.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Image Rotator w/ Desc - CSS & jQuery Tutorial</title>
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="/css/styles.css">
<script type="text/javascript" src="/js/jquery.js"></script>
</head>

El documento está escrito utilizando esquemas HTML5 con sólo dos archivos externos. La biblioteca jQuery del tutorial original v1.3.2 que es una copia mucho más antigua. Pero he comprobado mediante la sustitución de la v1.10.1 jQuery y todavía funciona bien. Los principales códigos no cambian mucho en las diferentes versiones, pero se pueden actualizar las animaciones en cualquier forma que se desee.

El código HTML interno es un poco más fácil de entender, ya que se divide en pequeños bloques div. Podemos encontrar un div con la clase .main_image que contiene la imagen más grande que se ve en la izquierda. También dispone de bloques para el texto de la descripción que se re-anima para cada nueva diapositiva.

<div id="main" class="container">
    <div class="main_image">
        <img src="/images/banner01.png" alt="- banner1" />
        <div class="desc">
            <a href="#" class="collapse">Close Me!</a>
            <div class="block">
                <h2>Luigi's Mansion</h2>
                <small>08/27/2013</small>
                
                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork By Glenn Jones</a> </p>
            </div>
        </div>
    </div>

Por debajo de esto se encuentra una colección de bloques más pequeños que contienen la imagen en miniatura. También posee un título para la foto junto con la fecha de publicación. Esta información se extrae a través de jQuery y luego se añade en el contenedor principal de la imagen.

<div class="image_thumb">
    <ul>
        <li>
            <a href="/images/banner01.png"><img src="/images/banner01_thumb.png" alt="Luigi Mansion" /></a>
            <div class="block">
                <h2>Luigi's Mansion</h2>
                <small>08/27/2013</small>
                    
                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://dribbble.com/shots/1212598-Luigi-s-Mansion" target="_blank">Artwork by Scott Balmer</a> </p>
            </div>
        </li>

Ahora bien, esto es sólo un ejemplo de un elemento de la lista de todo el conjunto. Pero se puede tener una idea del formato que contiene el título, la fecha y una breve descripción. Todo esto está contenido dentro de un único div con la clase .image_thumb que luego mantiene una lista desordenada.

Diseño de estilos

La hoja de estilos CSS es bastante típica y no utiliza un montón de reinicios. Quitamos todos los márgenes y el relleno de los elementos originales utilizando el selector comodín (*). El contenedor principal de previsualización de la imagen tiene un montón de estilos fijos para mantener todo en orden. Es posible que se deba ajustar estos tamaños a fin de que se mezclen bien dentro de tu propio sitio web.

.main_image {
    width: 598px; height: 456px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.main_image h2 {
    font-size: 2em;
    font-weight: normal;
    margin: 0 0 5px;    padding: 10px;
}
.main_image p {
    font-size: 1.2em;
    padding: 10px;    margin: 0;
    line-height: 1.6em;
}
.block small {
    padding: 0 0 0 20px;
    background: url(images/icon_cal.gif) no-repeat 0 center;
    font-size: 1em;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
    position: absolute;
    bottom: 0;    left: 0;
    width: 100%;
    display: none;
}
.main_image .block{
    width: 100%;
    background: #111;
    border-top: 1px solid #000;
}

Los estilos de elementos de lista son también bastante típicos e incluyen su propia clase hover. Se construye a partir de una clase que consigue aplicase a través de jQuery en lugar del típico :hover. Pero esto puede ser fácilmente actualizable según necesidades. Sin embargo, la clase .active sigue siendo necesaria para asegurar que podemos cambiar entre los diferentes elementos de forma automática.

.image_thumb {
    float: left;
    width: 299px;
    background: #f0f0f0;
    border-right: 1px solid #fff;
    border-top: 1px solid #ccc;
}
.image_thumb img {
    border: 1px solid #ccc;
    padding: 5px;
    background: #fff;
    float: left;
}
.image_thumb ul {
    margin: 0; padding: 0;
    list-style: none;
}
.image_thumb ul li{
    margin: 0; padding: 12px 10px;
    background: #f0f0f0 url(images/nav_a.gif) repeat-x;
    width: 279px;
    float: left;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
    background: #ddd;
    cursor: pointer;
}
.image_thumb ul li.active {
    background: #fff;
    cursor: default;
}
html .image_thumb ul li h2 {
    font-size: 1.5em;
    margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
    float: left;
    margin-left: 10px;
    padding: 0;
    width: 180px;
}

Trabajando con jQuery

La pieza final de este tutorial se centra en la rotación de la imagen. El script es bastante largo, pero una parte del código es sólo duplicada en una función separada. Voy a dividirlo en segmentos para que todo sea más fácil de entender.

var intervalId;
var slidetime = 2500; // milliseconds between automatic transitions

$(document).ready(function() {    

    // Comment out this line to disable auto-play
    intervalID = setInterval(cycleImage, slidetime);

    $(".main_image .desc").show(); // Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity
    $(".image_thumb ul li:first").addClass('active');

Todos estos códigos se ejecutarán justo cuando se ha cargado el documento. Creamos una nueva variable de intervalo, que realiza un seguimiento de la auto-rotación. Se puede editar slideTime con cualquier cantidad en milisegundos entre las diapositivas individuales. La línea que llama a setInterval() puede ser comentada para desactivar la reproducción automática. Esta línea de código hace referencia a una función personalizada cycleImage() que explicaré un poco más adelante.

    $(".image_thumb ul li").click(function(){ 
        // Set Variables
        var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
        var imgDesc = $(this).find('.block').html();     //  Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();    // Calculate height of block    
        
        if ($(this).is(".active")) {  // If it's already active, then...
            return false; // Don't click through
        } else {
            // Animate the Teaser                
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
                $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
            });
        }
        
        $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists
        $(this).addClass('active');  // add class of 'active' on this list only
        return false;
        
    }) .hover(function(){
        $(this).addClass('hover');
        }, function() {
        $(this).removeClass('hover');
    });

Este bloque más grande de código espera para ejecutarse hasta que el usuario hace click en un elemento de la lista interna. En primer lugar, generamos algunas variables para actualizar la URL de las imágenes grandes y la descripción interna HTML. Si el elemento de lista actual ya está activo, usamos return false para detener la función. Si no, animamos los nuevos contenidos del sitio y luego se actualiza la clase .active en el nuevo elemento de la lista.

También te darás cuenta hacia el final que estamos usando el evento .hover() aplicando una clase de hover sobre el elemento de la lista. jQuery permite el encadenamiento de múltiples eventos juntos en el mismo selector. Sin exceso de código esto puede ser leído como $(".image_thumb ul li").click().hover(), que es la sintaxis completamente válida.

Las funciones de brief toggle también vienen después, pero esto es jQuery muy básico que no necesita mucha explicación. Mira el jQuery  .slideToggle() para entender más.

  // Function to autoplay cycling of images
    // Source: http://stackoverflow.com/a/9259171/477958
    function cycleImage(){
    var onLastLi = $(".image_thumb ul li:last").hasClass("active");       
    var currentImage = $(".image_thumb ul li.active");
    
    
    if(onLastLi){
      var nextImage = $(".image_thumb ul li:first");
    } else {
      var nextImage = $(".image_thumb ul li.active").next();
    }
    
    $(currentImage).removeClass("active");
    $(nextImage).addClass("active");
    
        // Duplicate code for animation
        var imgAlt = $(nextImage).find('img').attr("alt");
        var imgTitle = $(nextImage).find('a').attr("href");
        var imgDesc = $(nextImage).find('.block').html();
        var imgDescHeight = $(".main_image").find('.block').height();
                    
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
      $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
      $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
  };

Ahora bien, esta última función cycleImage() sólo se utiliza por la variable de control deslizante automática. Recuerda que si deseas desactivar esta funcionalidad basta con comentar la variable setInterval(). Yo estaba buscando una solución básica y encontré esta útil respuesta en Stack Overflow. He personalizado las variables para apuntar correctamente los elementos dentro de este tutorial e incluso que todos los ciclos vuelvan al principio perfectamente.

La mayor parte del código de la animación se ha duplicado desde el controlador de eventos click originales. onLastLi es una variable que comprueba si el último elemento de la lista se encuentra activo. Si es así, nuestro rotador debe centrarse en el primer punto y regresar al principio. El sistema de auto-rotación sólo requiere un currentImage con un nextImage y puede funcionar indefinidamente sin demora.

Conclusión

Hay por ahí muchos plugins de auto-rotación en jQuery, pero muchos de ellos tienen su propia interfaz de pre-formato. Esto puede ser bueno si coincide con tu propio diseño. Pero a veces es mucho más fácil crear tu propia rotador desde cero, como lo hemos hecho aquí.

Espero que este tutorial puede ser útil para otros desarrolladores que necesitan una solución de rotación de imagen dinámica. Muchos de los códigos jQuery son muy fáciles de transportar a tu propio proyecto si se puede actualizar los selectores. También eres libre de descargar una copia del código del tutorial y utilizar esta demostración como modelo para la estructuración de tu rotador de imágenes.

Demo "“ Descargar código fuente

Jesus_Caceres