logo

Hacer una presentación de diapositivas en mosaico con jQuery y CSS

Al diseñar una página de producto, a menudo es necesario presentar una serie de imágenes en una sucesión, también conocida como presentación de diapositivas. Con el aumento de la biblioteca jQuery y sus numerosos complementos, hay una gran cantidad de soluciones listas para usar que abordan este problema. Sin embargo, para causar una impresión duradera a sus visitantes, debe presentarles algo que no hayan visto antes.

Hoy estamos haciendo una galería de mosaicos jQuery &CSS. Mosaico, porque contará con un interesante efecto de transición de mosaico al pasar de una diapositiva a otra.

Paso 1 - XHTML

El efecto de mosaico de la presentación de diapositivas se logra dividiendo la imagen original en partes más pequeñas. Estos mosaicos, que contienen partes de la imagen, se ocultan secuencialmente a la vista, lo que provoca el efecto. El marcado de la presentación de diapositivas es bastante sencillo. Consiste en el elemento contenedor principal de presentación de diapositivas (#mosaic-slideshow ), una flecha izquierda y derecha para la transición anterior y siguiente y el div mosaico-diapositiva, que jQuery inserta en tiempo de ejecución.

demostración.html

<div id="mosaic-slideshow">
    <div class="arrow left"></div>
    <div class="arrow right"></div>

    <div class="mosaic-slide" style="z-index: 10;">

        <!-- The mosaic-slide div and the tiles are generated by jQuery -->
        <div class="tile" style="..."></div>
        <div class="tile" style="..."></div>
        <div class="tile" style="..."></div>
        <div class="tile" style="..."></div>

    </div>
</div>

El div con el diapositiva de mosaico jQuery agrega el nombre de la clase a la página después de la transición() Se ejecuta la función de JavaScript (volveremos a esto en el tercer paso). En su interior se puede ver el mosaico divs. Hay un total de 56 divs de este tipo, cada uno de los cuales tiene una porción de 60 px por 60 px de la imagen de la diapositiva configurada como fondo.

Paso 2:CSS

Para que este efecto funcione (y lo que es más importante, se vea bien), debemos agregar algunas líneas de CSS. Aquí solo se muestra el código utilizado directamente por la galería. Puede ver el código que aplica estilo al resto de la página de demostración en styles.css .

estilos.css - Parte 1

#mosaic-slideshow{
    /* The slideshow container div */
    height:500px;
    margin:0 auto;
    position:relative;
    width:670px;
}

.mosaic-slide{
    /* This class is shared between all the slides */
    left:80px;
    position:absolute;
    top:25px;

    border:10px solid #555;

    /* CSS3 rounded corners */
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}

.tile{
    /* The individual tiles */
    height:60px;
    width:60px;
    float:left;
    border:1px solid #555;
    border-width:0 1px 1px 0;
    background-color:#555;
}

La presentación de diapositivas está contenida dentro del div con una ID de mosaic-slideshow (o #mosaic-slideshow, si nos referimos a él en forma de selector CSS / jQuery). Solo puede haber un div de este tipo en la página, de ahí el uso de un atributo de ID.

Sin embargo, puede haber más de una diapositiva de mosaico divs en la página. El efecto en sí se logra apilando dos diapositivas una encima de la otra y ocultando los mosaicos de la primera para revelar las de la segunda. Es por eso que estamos usando un nombre de clase en lugar de una ID.

Algunas de las reglas más interesantes que se presentan aquí son las tres reglas de CSS3 para esquinas redondeadas. Como el estándar CSS3 aún es un trabajo en progreso, los navegadores no son compatibles con el border-radius normal. propiedad todavía (a excepción de la nueva versión 10.50 de Opera), y necesita prefijos específicos del proveedor para reconocerlo. El -moz- Firefox utiliza el prefijo y -webkit- es utilizado por Safari y Chrome.

estilos.css - Parte 2

.arrow{
    /* The prev/next arrows */
    width:35px;
    height:70px;
    background:url("img/arrows.png") no-repeat;
    position:absolute;
    cursor:pointer;
    top:50%;
    margin-top:-35px;
}

.arrow.left{
    left:15px;
    background-position:center top;
}

.arrow.left:hover{
    background-position:center -70px;
}

.arrow.right{
    right:15px;
    background-position:center -140px;
}

.arrow.right:hover{
    background-position:center -210px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}

La flecha la clase es compartida por las flechas anterior y siguiente. Necesitan un estilo individual además de esta regla común, por lo que lo agregamos después de esto. También estamos usando un sprite CSS como fondo para los divs de flecha. Contiene un estado regular y flotante para ambas flechas, lo que nos evita tener que usar cuatro imágenes individuales.

Paso 3:jQuery

Después de incluir la biblioteca jQuery en la página, podemos pasar a crear el script que hará que la presentación de diapositivas funcione. Para lograr el efecto mosaico, el script define 4 funciones:

  • transición() - esta función realiza una transición animada entre la diapositiva que se muestra actualmente y una nueva especificada por el parámetro id. Funciona colocando la nueva diapositiva que queremos mostrar, debajo de la actual, y luego ocultando la actual, un mosaico a la vez;
  • generar cuadrícula() - esta función es utilizada por Transition() para generar una cuadrícula de mosaicos. Cada mosaico contiene una parte de la imagen de la diapositiva como fondo;
  • siguiente() - detecta cuál es la siguiente diapositiva y ejecuta la función Transition() con su índice;
  • anterior() - análogo a next().

script.js - Parte 1

/* The slide images are contained in the slides array. */
var slides = new Array('img/slide_1.jpg',
                       'img/slide_2.jpg',
                       'img/slide_3.jpg',
                       'img/slide_4.jpg',
                       'img/slide_5.jpg');

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    $('.arrow.left').click(function(){
        prev();

        /* Clearing the autoadvance if we click one of the arrows */
        clearInterval(auto);
    });

    $('.arrow.right').click(function(){
        next();
        clearInterval(auto);
    });

    /* Preloading all the slide images: */

    for(var i=0;i<slides.length;i++)
    {
        (new Image()).src=slides[i];
    }

    /* Showing the first one on page load: */
    transition(1);

    /* Setting auto-advance every 10 seconds */

    var auto;

    auto=setInterval(function(){
        next();
    },10*1000);
});

El $(documento).ready() El método se ejecuta una vez que la página ha terminado de cargarse. Esto asegurará que todos los divs y otros elementos sean accesibles para el script. En su interior vinculamos una función para el evento de clic en las flechas anterior y siguiente, precargamos todas las imágenes, mostramos la primera diapositiva (de lo contrario, la presentación de diapositivas estaría vacía) y configuramos el intervalo de avance automático.

script.js - Parte 2

var current = {};
function transition(id)
{
    /* This function shows the slide specified by the id. */

    if(!slides[id-1]) return false;

    if(current.id)
    {
        /* If the slide we want to show is currently shown: */
        if(current.id == id) return false;

        /* Moving the current slide layer to the top: */
        current.layer.css('z-index',10);

        /* Removing all other slide layers that are positioned below */
        $('.mosaic-slide').not(current.layer).remove();
    }

    /* Creating a new slide and filling it with generateGrid: */
    var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));

    /* Moving it behind the current slide: */
    newLayer.css('z-index',1);

    $('#mosaic-slideshow').append(newLayer);

    if(current.layer)
    {
        /* Hiding each tile of the current slide, exposing the new slide: */
        $('.tile',current.layer).each(function(i){
            var tile = $(this);
            setTimeout(function(){
                tile.css('visibility','hidden');
            },i*10);
        })
    }

    /* Adding the current id and newLayer element to the current object: */
    current.id = id;
    current.layer = newLayer;
}

La función de transición utiliza la actual global objeto para almacenar la identificación de la diapositiva que se muestra actualmente y una referencia a la div de la diapositiva actual. Esto se usa más tarde para eliminar las diapositivas sobrantes y evitar que se produzca una transición si se va a mostrar la misma diapositiva que la activa actualmente.

Observe cómo usamos cada método en la línea 31 para recorrer los mosaicos de la diapositiva actual y programarlos para que se oculten en i*10 milisegundos en el futuro. Como yo se incrementa para cada mosaico, lo que significa que están ocultos con 10 milisegundos de diferencia entre sí.

script.js - Parte 3

function next()
{
    if(current.id)
    {
        transition(current.id%slides.length+1);
    }
}

function prev()
{
    if(current.id)
    {
        transition((current.id+(slides.length-2))%slides.length+1);
    }

}

/* Width and height of the tiles in pixels: */
var tabwidth=60, tabheight=60;

function generateGrid(param)
{
    /* This function generates the tile grid, with each tile containing a part of the slide image */

    /* Creating an empty jQuery object: */
    var elem = $([]),tmp;

    for(var i=0;i<param.rows;i++)
    {
        for(var j=0;j<param.cols;j++)
        {
            tmp = $('<div>', {
                    "class":"tile",
                    "css":{
                        "background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
                    }
            });

            /* Adding the tile to the jQuery object: */
            elem = elem.add(tmp);
        }

        /* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */
        elem = elem.add('<div class="clear"></div>');
    }

    return elem;
}

El parámetro pasado a generateGrid() es un objeto que contiene las filas y las columnas que queremos que se generen, así como la imagen que se establecerá como fondo de los mosaicos. Mientras se generan los mosaicos, la imagen de fondo se desplaza según la posición actual del mosaico en la fila y en la columna. Finalmente, el mosaico se agrega a un objeto jQuery vacío que se devuelve al final.

¡Con esto, la presentación de mosaicos está completa!

Envolviéndolo

Hoy creamos una presentación de diapositivas con un efecto de transición de mosaico animado. Puede modificarlo para incluir un número diferente de filas y columnas o cambiar la forma en que se cambian las diapositivas por completo.

¿Qué opinas? ¿Cómo usarías esta presentación de diapositivas?