Una impresionante galería de cajas de luz CSS3 con jQuery

En este tutorial vamos a crear una impresionante galería de imágenes que aprovecha las últimas técnicas de CSS3 y jQuery. La secuencia de comandos podrá escanear una carpeta de imágenes en su servidor web y crear una galería completa de cuadro de luz de arrastrar y soltar a su alrededor.

Será amigable con los motores de búsqueda e incluso será compatible con navegadores que se remontan a IE6 (aunque se pierde parte de la genialidad).

Estamos usando jQuery , interfaz de usuario de jQuery (para arrastrar y soltar) y el complemento fancybox jQuery para lightbox mostrar además de PHP y CSS para interactividad y estilo.

Antes de seguir leyendo, le sugiero que descargue los archivos de ejemplo y tener la demostración abierto en una pestaña como referencia.

Nota: puede encontrar una galería de lightbox más moderna hecha con el marco Bootstrap en Epic Bootstrap.

Entonces, comencemos con el paso uno.

Paso 1 - XHTML

La idea principal es tener PHP como back-end que generará el XHTML necesario para cada imagen. El código generado se incluye más tarde en demo.php y completa el front-end XHTML de la galería.

demo.php

<!-- The gallery container: -->
<div id="gallery">

<?php
/* PHP code, covered in detail in step 3 */
?>

<!-- The droppable share box -->
<div class="drop-box">
</div>

</div>

<div class="clear"></div>

<!-- This is later converted to the modal window with the url of the image: -->
<div id="modal" title="Share this picture">
<form>
<fieldset>
<label for="name">URL of the image</label>
<input type="text" name="url" id="url" class="text ui-widget-content ui-corner-all" onfocus="this.select()" />
</fieldset>
</form>

</div>

Nada demasiado elegante aquí. Observe el modal div:se utiliza para generar la ventana modal que se muestra cuando el usuario suelta una imagen en el cuadro de compartir. Pero más sobre esto más adelante.

Paso 2:CSS

Ahora que tenemos todo el marcado en su lugar, es hora de diseñarlo. Primero, debemos incluir los archivos CSS en la sección principal de la página.

demo.php

<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css">

Después de que hayamos hecho eso, podemos comenzar a escribir los estilos.

demostración.css

body{
    /* Styling the body */
    color:white;
    font-size:13px;
    background: #222222;
    font-family:Arial, Helvetica, sans-serif;
}

#gallery{
    /* The pics container */
    width:100%;
    height:580px;
    position:relative;
}

.pic, .pic a{
    /* Each picture and the hyperlink inside it */
    width:100px;
    height:100px;
    overflow:hidden;
}

.pic{
    /* Styles specific to the pic class */
    position:absolute;
    border:5px solid #EEEEEE;
    border-bottom:18px solid #eeeeee;

    /* CSS3 Box Shadow */
    -moz-box-shadow:2px 2px 3px #333333;
    -webkit-box-shadow:2px 2px 3px #333333;
    box-shadow:2px 2px 3px #333333;
}

.pic a{
    /* Specific styles for the hyperlinks */
    text-indent:-999px;
    display:block;
    /* Setting display to block enables advanced styling for links */
}

.drop-box{
    /* The share box */
    width:240px;
    height:130px;
    position:absolute;
    bottom:0;
    right:0;
    z-index:-1;

    background:url(img/drop_box.png) no-repeat;
}

.drop-box.active{
    /* The active style is in effect when there is a pic hovering above the box */
    background-position:bottom left;
}

label, input{
    /* The modal dialog URL field */
    display:block;
    padding:3px;
}

label{
    font-size:10px;
}

fieldset{
    border:0;
    margin-top:10px;
}

#url{
    /* The URL field */
    width:240px;
}

Una de las clases anteriores, que probablemente necesite una aclaración adicional, es la imagen clase CSS. Esto se usa para diseñar las imágenes para que parezcan polaroids. Para lograr esto, básicamente pone un borde blanco alrededor de cada imagen.

También se usa en la clase el box-shadow Propiedad CSS3, que proyecta una sombra debajo de cada polaroid.

Si ha mirado alrededor de la demostración de la galería, ha notado que las imágenes están dispersas en la página y rotadas de forma aleatoria. Esto se hace únicamente con CSS en el lado de PHP, como verá en un momento.

El resto de los estilos son bastante sencillos y no se tratarán en detalle aquí.

Paso 3 - PHP

Como recordará, en el paso 1 cubrimos la parte XHTML y mencionamos que PHP es responsable de generar el marcado que comprende las imágenes individuales. Y así es como se hace esto:

demo.php

/* Configuration Start */
$thumb_directory = 'img/thumbs';
$orig_directory = 'img/original';
$stage_width=600;
$stage_height=400;
/* Configuration end */

$allowed_types=array('jpg','jpeg','gif','png');
$file_parts=array();
$ext='';
$title='';
$i=0;

/* Opening the thumbnail directory and looping through all the thumbs: */
$dir_handle = @opendir($thumb_directory) or die("There is an error with your image directory!");
$i=1;

while ($file = readdir($dir_handle))
{
    /* Skipping the system files: */
    if($file=='.' || $file == '..') continue;

    $file_parts = explode('.',$file);
    $ext = strtolower(array_pop($file_parts));

    /* Using the file name (withouth the extension) as a image title: */
    $title = implode('.',$file_parts);
    $title = htmlspecialchars($title);

    /* If the file extension is allowed: */
    if(in_array($ext,$allowed_types))
    {
        /* Generating random values for the position and rotation: */
        $left=rand(0,$stage_width);
        $top=rand(0,400);
        $rot = rand(-40,40);

        if($top>$stage_height-130 && $left > $stage_width-230)
        {
            /* Prevent the images from hiding the drop box */
            $top-=120+130;
            $left-=230;
        }

        /* Outputting each image: */
        echo '
        <div id="pic-'.($i++).'" class="pic" style="top:'.$top.'px;left:'.$left.'px;background:url('.$thumb_directory.'/'.$file.') no-repeat 50% 50%; -moz-transform:rotate('.$rot.'deg); -webkit-transform:rotate('.$rot.'deg);">

        <a class="fancybox" rel="fncbx" href="'.$orig_directory.'/'.$file.'" target="_blank">'.$title.'</a>

        </div>';
    }
}

/* Closing the directory */
closedir($dir_handle);

Primero, abrimos el directorio de miniaturas con opendir (usando el modificador @ para evitar que se muestren posibles errores al usuario) y recorremos todas las imágenes.

En el bucle, omitimos los archivos que no son de imagen y generamos un código XHTML para cada imagen, que se imprime directamente en la pantalla.

Como se mencionó en la parte de CSS, PHP maneja la rotación y dispersión de las imágenes en la página. Cada imagen se coloca en coordenadas X e Y aleatorias y se gira en un ángulo de entre -40 y 40 grados (para evitar imágenes al revés). Estos se generan con el uso de rand() Función PHP e incluida como estilos CSS en el atributo de estilo de la imagen .

Hay dos carpetas de imágenes utilizadas por la galería:thumbs , que contiene las miniaturas de 100x100 px, y original , que contiene las versiones grandes de las imágenes. Es importante que la miniatura y la imagen original tengan el mismo nombre, de lo contrario la galería no funcionará correctamente.

Lo único que queda es agregar algo de interactividad.

Paso 4 - jQuery

Ahora tenemos una atractiva galería de CSS en nuestras manos. Pero eso no significa nada si no podemos arrastrar las imágenes bonitas por la pantalla y acercarlas en una elegante pantalla de caja de luz, ¿verdad?

Aquí es donde jQuery entra en juego.

secuencia de comandos.js

$(document).ready(function(){
    // Executed once all the page elements are loaded
    var preventClick=false;
    $(".pic a").bind("click",function(e){

        /* This function stops the drag from firing a click event and showing the lightbox */
        if(preventClick)
        {
            e.stopImmediatePropagation();
            e.preventDefault();
        }
    });

    $(".pic").draggable({

        /* Converting the images into draggable objects */
        containment: 'parent',
        start: function(e,ui){
            /* This will stop clicks from occuring while dragging */
            preventClick=true;
        },
        stop: function(e, ui) {
            /* Wait for 250 milliseconds before re-enabling the clicks */
            setTimeout(function(){ preventClick=false; }, 250);
        }
    });

    $('.pic').mousedown(function(e){
        /* Executed on image click */
        var maxZ = 0;

        /* Find the max z-index property: */
        $('.pic').each(function(){
            var thisZ = parseInt($(this).css('zIndex'))
            if(thisZ>maxZ) maxZ=thisZ;
        });

        /* Clicks can occur in the picture container (with class pic) and in the link inside it */
        if($(e.target).hasClass("pic"))
        {
            /* Show the clicked image on top of all the others: */
            $(e.target).css({zIndex:maxZ+1});
        }
        else $(e.target).closest('.pic').css({zIndex:maxZ+1});
    });

    /* Converting all the links to a fancybox gallery */
    $("a.fancybox").fancybox({
        zoomSpeedIn: 300,
        zoomSpeedOut: 300,
        overlayShow:false
    });

    /* Converting the share box into a droppable: */
    $('.drop-box').droppable({
        hoverClass: 'active',
        drop:function(event,ui){

            /* Fill the URL text field with the URL of the image. */
            /* The id of the image is appended as a hash #pic-123 */
            $('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id'));
            $('#modal').dialog('open');
        }
    });

    /* Converts the div with id="modal" into a modal window  */
    $("#modal").dialog({
        bgiframe: true,
        modal: true,
        autoOpen:false,

        buttons: {
            Ok: function() {
                $(this).dialog('close');
            }
        }
    });

    if(location.hash.indexOf('#pic-')!=-1)
    {
        /* Checks whether a hash is present in the URL */
        /* and shows the respective image */
        $(location.hash+' a.fancybox').click();
    }
});

Primero, vinculamos una función de clic a las imágenes, lo que evita que se muestre la caja de luz una vez que comenzamos a arrastrar la imagen.

Después de esto, hacemos que todas las imágenes sean arrastrables , y luego configuramos el lightbox .

Más tarde, convertimos el cuadro "Drop to share" en un droppable , lo que le permite detectar cuando una imagen se desplaza y se deja caer. Esto nos permite agregar un estilo de desplazamiento especial al contenedor y abrir la ventana modal al soltar.

El modal La ventana en sí es un componente de interfaz de usuario que viene con jQuery UI. Oculta todos los elementos de la página bajo una superposición semitransparente y, por lo tanto, los bloquea para el usuario. Lo único que ocupa su atención es la ventana del mensaje, que en nuestro caso contiene el cuadro de texto con la URL de la imagen, como se define en el div con id de modal en el paso uno.

Por último, tenemos algunas líneas de código que comprueban si un hash del tipo #pic-123 está presente en la URL, lo que haría que la imagen respectiva se mostrara en el cuadro de luz al cargar la página.

¡Con esto, nuestra impresionante galería CSS3 está completa!

Conclusión

Hoy creamos una galería elegante, que utiliza un amplio conjunto de tecnologías web para brindarle un nuevo tipo de experiencia dinámica.

Además, es extremadamente fácil agregarlo a un sitio existente:solo necesita cargarlo y proporcionar una carpeta con imágenes, no se requieren bases de datos.

Eres libre de modificar y usar esta galería en tus propios sitios. Asegúrese de compartir todas sus increíbles creaciones basadas en esta galería con la comunidad a través de nuestros tutoriales combinados. (encima de la sección de comentarios).

Además, si disfrutó de este artículo, es posible que desee suscribirse a nuestro canal RSS o seguirnos en Twitter.