Vista previa de imágenes con CSS3 y jQuery

La idea que hoy tenemos entre manos es la de crear un álbum de fotos en el que cuando situemos el ratón encima de una de las miniaturas, empiece una preview del resto de fotos que forman parte del álbum. Explicado ya lo que vamos hacer, pongámonos manos a la obra.

Código HTML

Lo primero que haremos será crear el esqueleto que formará parte de nuestro diseño. El código para conseguir esto es el siguiente. Para simplificar la estructura, lo pondremos en el archivo “index.php”.

<!DOCTYPE html>

<html>

   
<head>

       
<meta charset="utf-8" />

       
<title>Album Previews con CSS3 y jQuery </title>



        <!—Nuestra hoja de estilo -->

       
<link rel="stylesheet" href="assets/css/styles.css" />



   
</head>

   
<body>



       
<div id="main">



               
<a href="#" data-images="assets/img/thumbs/11.jpg|assets/img/thumbs/10.jpg"

                   
class="album">

                   
<img src="assets/img/thumbs/4.jpg" alt="People" />

                   
<span class="preloader"></span>

               
</a>

       
</div>



       
<!-- JavaScript Includes -->

       
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

       
<script src="assets/js/script.js"></script>

       
<script src="assets/js/albumPreviews.js"></script>



   
</body>

</html>

En este código, cabe destacar el contenedor “#main” que es donde está el código que muestra los álbumes.

Cada álbum es un link que apunta a una página donde el usuario podrá ver todas las fotos que forman parte del álbum. Cada álbum contiene un atributo “data” con las urls hacia las imágenes en miniatura de las fotos que forman parte de él. Luego por medio de jQuery recuperaremos esas urls para crear la correspondiente animación.

Dentro del link nos encontramos con la imagen principal del álbum y que será mostrada en el caso de que el usuario tenga desactivado el uso de JavaScript de su navegador. Esta imagen debe ser diferente al resto de indicadas dentro del atributo “data”.

Para hacer más sencillo la explicación, las imágenes de cada álbum estarán almacenadas en arrays y no en base de datos. De todas formas, el cambio es muy sencillo ya que sólo deberíamos ejecutar la instrucción que nos devolviera las rutas de las imágenes que forman parte de cada álbum.

El código PHP encargado de mostrar todos los álbumes es el siguiente.

$albums = array(

    'People' => array(

                'assets/img/thumbs/4.jpg',

                'assets/img/thumbs/11.jpg',

                'assets/img/thumbs/10.jpg'),



   // Más álbumes aquí

);



foreach ($albums as $name => $a) {



    ?>



    <a href="#" data-images="<?php echo implode('|', array_slice($a,1))?>" class="album">

       <img src="<?php echo $a[0]?>" alt="<?php echo $name?>" />

       <span class="preloader"></span>

    </a>

    <?php

}

Código JavaScript

El funcionamiento del código es muy sencillo. Capturaremos el evento “mouseenter” para que cuando eso ocurra obtener el valor del atributo “data-images”, analizarlo y agregar las imágenes al álbum. A continuación se inicia una presentación de las diapositivas que para cuando se detecta el evento “mouseleave”.

(function($) {

    $.fn.albumPreviews = function() {

        return this.each(function(){

            var album = $(this),

                loop = null, images = $();



            if(!album.data('images')){

                //Si no existe el atributo data-images, salto a otro album.

                return true;

            }



            var sources = album.data("images").split('|');

            album.on('mouseenter', function(){



                if(!images.length){

                    //Las imágenes no están aún cargadas

                    $.each(sources,function(){

                        images = images.add('<img src="' + this + '" />');

                    });



                    //Empieza la animación cuando la primera imagen está cargada

                    images.first().load(function() {

                        album.trigger('startAnimation');

                    });



                    album

                        .append(images)

                        .addClass('loading');

                }

                else{

                    //Empieza la animación directamente

                    album.trigger('startAnimation');

                }



            }).on('mouseleave', function(){

                album.trigger('stopAnimation');

            });



            album.on('startAnimation',function(){

                var iteration = 0;

                //Empieza el loop a través de las fotos

                (function animator(){

                    album.removeClass('loading');



                    //Oculta la actual foto y muestra la siguiente

                    album.find('img').filter(function(){

                        return ($(this).css('opacity') == 1);

                    }).animate({

                        'opacity' : 0

                    }).nextFirst('img').animate({

                        'opacity' : 1

                    });



                    loop = setTimeout(animator, 1000);  // Once per second

                })();

            });



            album.on('stopAnimation',function(){

                album.removeClass('loading');

                // Para la animación

                clearTimeout(loop);

            });



        });



    };



    //Este método jQuery retornará el siguiente elemento del tipo especificado

   //o el primero si no existe

    $.fn.nextFirst = function(e) {

        var next = this.nextAll(e).first();

        return (next.length) ? next : this.prevAll(e).last();

    };

})(jQuery);

En el código podemos ver dos eventos personalizados para una mejor organización del código. Estos eventos son “startAnimation” y “stopAnimation”. Ellos son lanzados cuando se detectan los eventos “mouseenter” y “mouseleave”.

La animación de las imágenes es manejada por la función “animator” que es llamada una vez cada segundo con un timeout.

La forma de inicializar el plugin anterior es la siguiente.

$(function() {

    // Initialize the plugin

    $('#main .album').albumPreviews();

});

Código CSS

A continuación os mostramos el tema de la hoja de estilos.

.album{

    width:140px;

    height:140px;

    margin: 15px 5px;

    position:relative;



    display:inline-block;

    border: 4px solid #F0F0F0;

    background-color: #F0F0F0;



    border-radius:12px;

    box-shadow:0 -2px 0 #616161;



    /*Reflejo abajo de la imagen */

    -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.1) 100%);

}



/* Muestra una sombra en el borde de la imagen */

.album:before{

    content: '';

    top: -1px;

    left: -1px;

    right: -1px;

    bottom: -1px;

    z-index:1000;

    position: absolute;

    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4) inset;

    border:1px solid #fff;

}



/*El album de fotos (ocultado por defecto) */

.album img{

    top:0;

    left:0;

    opacity:0;

    width:140px;

    height:140px;

    position:absolute;

}



/*El primer thumbnails está visible por defecto */

.album img:first-child{

    opacity:1;

}



.album img,

.album:before{

    border-radius: 10px;

}



/*La precarga PNG rota con una animación keyframe */



.album .preloader{

    display:none;

}



.album.loading .preloader{

    content:'';

    position:absolute;

    width:18px;

    height:18px;

    background:url('../img/preloader.png') center center;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin:auto;

    display:block;



    /*Configuramos un keyframe animación para Firefox */

    -moz-animation: rotate 1s linear infinite;



    /*Configuración para Chrome y Safari */

    -webkit-animation: rotate 1s linear infinite;

}



/* Webkit keyframe animación */

@-webkit-keyframes rotate{

    0%{         -webkit-transform:rotate(0deg);}

    100%{       -webkit-transform:rotate(360deg);}

}



/* Firefox Keyframe animación */

@-moz-keyframes rotate{

    0%{         -moz-transform:rotate(0deg);}

    100%{       -moz-transform:rotate(360deg);}

}

La clase “.preloader” es mostrada la primera vez que el ratón entra dentro de la imagen. Luego el script empieza la carga de las imágenes. Si contamos con una buena conexión, seguro que no veremos esto, pero es bueno dejarlo preparado para aquellos usuarios que tengan problemas de velocidad.

Una vez hecho esto, ya tenemos creado nuestro álbum preview.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP