Efecto lightbox en tus imagenes de WordPress

Introducción

De las diferentes opciones que hay para mostrar imágenes en una página, siempre me he decantado por el «efecto lightbox«, que es ese que hace que se vea la imagen en su tamaño original, o al menos en un tamaño superior (dependiendo del tamaño de la pantalla), sin salir de la página que estás visitando y que oscurece el resto de la página para darle mayor importancia a la página. Esto que me ha costado tanto de explicar se resume en la siguiente imagen,

Fancybox

Como ya he comentado en algunos artículos anteriores referidos a WordPress, no quiero añadir mas complementos de los necesarios. Así que he añadido las herramientas necesarias para poder disfrutar de este efecto sin necesidad de instalar un nuevo plugin.

En este caso me he decantado por Fancybox, que es de las diferentes opciones que he estado probando la que mas me ha convencido. Se basa en el uso de css y jQuery, siendo relativamente sencillo de implantar en tu sitio con WordPress.

Instalación en WordPress

Para instalarlo en WordPress, tendremos que intervenir en varios puntos, siempre del tema hijo. Aunque ya he comentado en varias ocasiones sobre el tema hijo, no quiero dejar de insistir en este aspecto, pues actuar sobre el tema principal ocasiona que cualquier actualización de mantenimiento del mismo lleve al traste todos los cambios y modificaciones que hayamos realizado.

Javascript

El primer paso consiste en añadir los scripts necesarios a tu tema hijo. Para ello tienes que editar el archivo functions.php y añadir las siguientes líneas,

if (!function_exists('shell_child_js')) {
        function shell_child_js() {
        wp_enqueue_script('jFancyBox', get_stylesheet_directory_uri() . '/js/jquery.fancybox.pack.js', array('jquery'), '2.1.4', true);
        wp_enqueue_script('jatareao', get_stylesheet_directory_uri() . '/js/jatareao.js', array('jquery','jFancyBox'), '0.0.1.0', true);
        }
    }
    if (!is_admin())
        add_action('wp_print_scripts', 'shell_child_js');

En la primera línea añadimos la biblioteca que nos permite realizar las operaciones, y en la segunda, de cosecha propia, contendrá lo siguiente

    jQuery(document).ready(function() {
        jQuery(".fancybox").fancybox();
    });

«.fancybox» es la clase que aplicarás a todas tus imágenes. En mi caso, he tenido que cambiarla para no tener que modificar todos los artículos publicados hasta la fecha.

Hoja de estilos

El siguiente paso será modificar la hoja de estilo del tema hijo, añadiendo las siguientes líneas al mismo,

/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('./images/fancybox_sprite.png');
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('./images/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url('./images/blank.gif'); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('./images/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

Modo de empleo

Cada una de las imágenes que insertamos en el documento, tendrá un aspecto como el siguiente

<a title="titulo de la imagen" href="https://url_de_la_imagen_en_tamaño_original">
<img title="titulo de la imagen" alt="titulo de la imagen" src="https://url_de_la_minatura" />
</a>

De forma que la imagen hará referencia a la miniatura, mientras que el enlace apunta a la imagen con su tamaño original. De esta forma, la página tardará menos en cargarse dado que solo mostrará las miniaturas, y al hacer clic sobre cada una de las imágenes nos mostrará la imagen principal.

Conclusiones

Se trata de una solución muy sencilla y fácil de aplicar que aligerará considerablemente la carga de nuestra página. A pesar de todo, aun quiero simplificar mas la operación, dado que como has visto es algo relativamente sencillo, y se puede implementar perfectamente con cuatro líneas de jQuery para conseguir un efecto muy parecido, pero reduciendo considerablemente el código empleado y el uso de bibliotecas externas.

atareao con Linux