Lightbox en WordPress para las páginas single

Lightbox es un plugin de jQuery que sirve para mostrar imágenes en una ventana modal que aparece por medio de una animación. Es bastante usado en la web ya que es fácil de implementar, tiene buen soporte entre los navegadores y provee una interfaz gráfica de buena estética.

Pueden ver un ejemplo del resultado de este artículo en el siguiente enlace: Ejemplo de Lightbox en Mentes Liberadas

WordPress tiene plugins instalables que implementan Lightbox o algún otro agregado con funcionalidad parecida. Pero en este artículo vamos a ver como agregarlo a mano, para aprender algunos temas vinculados tanto con WordPress como con jQuery.

Descarga de Lightbox y estructura

Primero vamos a ir a la web del plugin Lightbox, desarrollado por Leandro Vieira Pinho, y vamos a descargar el paquete con los archivos a utilizar. El enlace está en el ícono de la izquierda donde dice Get the New Version. En la pestaña How To Use de la web van a encontrar la explicación de cómo utilizar este plugin para cualquier web en general.

Luego de la descarga, descomprimimos el archivo y veremos una estructura como la siguiente.

lightbox-estructura

En sí mismo, el paquete es un ejemplo que pueden ver abriendo el archivo index.html que está en la carpeta raíz. En el directorio js aparecen un archivo de la librería jQuery en su última versión y las distintas versiones de Lightbox: Minimal, Pack y Completa.

En el directorio images están las imágenes que necesita el plugin. Se trata de botones donde hacer click cuando aparece la ventana modal, tanto para avanzar como para retroceder de imagen y también para cerrar la ventana.

El directorio css tiene un único archivo que es el estilo del plugin.

Copiando los archivos a nuestro tema de WordPress

Es hora de copiar los archivos a nuestro proyecto en WordPress. Vamos a suponer que nuestro tema está en la ubicación http://mi-sitio/wp-content/themes/mi-tema.

Y también, que dentro tenemos una estructura de directorios y archivos como la siguiente

En el directorio img están las imágenes del tema; en css, los estilos; en js, los archivos Javascript; y sueltos, aparecen los archivos de plantillas típicos de un tema de WordPress. Puse sólo algunos para ejemplificar.

El estilo jquery.lightbox-0.5.css lo vamos a copiar al directorio css. El archivo jquery.lightbox-0.5.js, al js. Las imágenes las vamos a agregar a un directorio lightbox que tenemos que crear en img. Es decir, a /img/lightbox.

El script que le da funcionalidad a Lightbox puede estar incluido en el header.php o podemos ponerlo en un archivo aparte. Si tienen un tema ya trabajado, es probable que ya tengan un archivo de scripts para la página single.php. En ese caso, las líneas de código que activan Lightbox deberían ir allí.

Para este ejemplo vamos a crear un archivo scripts.js y a agregarlo en js. Allí pondremos las líneas que se necesitan pero antes lo vincularemos desde header.php.

Agregando el plugin al header

Vamos a la sección <head></head> del HTML y agregamos

El if lo que hace es verificar si la página que se está cargando es un single. Sólo entrará al bloque de código si la condición se cumple. Luego, en la primera línea llamamos a jQuery. Recuerden que WordPress trae la librería y no hace falta bajarla. Otra alternativa es enlazarla a Google.

Obviamente la siguiente línea es para cargar el plugin Lightbox. En la tercera, incluimos el script single.js que tendrá las líneas de código para inicializar o activar Lightbox. La siguiente, puede estar o no, es para incluir el estilo CSS de la página single. Y la última, carga el estilo del plugin.

Modificando las rutas del plugin Lightbox

Abrimos el archivo jquery.lightbox-0.5.js que copiamos a js. Aclaro que uso este y no las versiones minimal o pack, porque busco editarlo. Las otras versiones también tienen la posibilidad de hacerlo, pero en la jquery.lightbox-0.5.js está el código más fácil de leer para luego hacer modificaciones.

Hay que cambiar las rutas que apuntan a las imágenes, dado que las hemos colocado en otra ubicación. Buscamos las siguientes líneas.

Y las adaptamos. Las imágenes, que son botones, están en inglés. Si quieren, pueden cambiarlas y crear sus propias imágenes. Eso hice yo, por eso verán que puse algunas imágenes propias en PNG. Para hacer esto, sólo necesitan un programa de diseño y respetar las dimensiones de las originales.

Script para poner en marcha Lightbox

Hasta aquí tenemos todo dispuesto, pero falta agregar las líneas de código en nuestro archivo single.js para que comience a funcionar. La idea, aquí, es que las imágenes de un post se abran en una ventana modal, así que vamos a ver qué forma tienen.

Como ven, es un hipervínculo <a></a> con una imagen <img> dentro. Esto es importante porque deberemos usar el selector de jQuery de forma correcta.

En single.js ponemos:

La primera línea jQuery.noConflict(); es para evitar el problema que genera el uso del caracter $ en WordPress. Luego, cada vez que necesitemos usarlo, lo reemplazaremos por la palabra jQuery.

Lo que viene luego es la activación de Lightbox. Noten la siguiente línea.

El selector de jQuery apunta a .singleContent a img. Quiero aclarar que singleContent es un div que tiene mi tema ejemplo que incluye los párrafos e imágenes del post individual. Luego, apunta a a. Sin embargo, si lo dejáramos así, Lightbox interpretaría que todos los enlaces son imágenes, lo que es incorrecto. Si apuntamos sólo a .singleContent a img el plugin no funcionará porque tiene que apuntar siempre a hipervínculos a. Entonces ¿cómo hacemos?

Apuntamos a las imágenes y luego usamos el método parent() para referirnos al padre de esa imagen, que es un hipervínculo. Esto asegura que se abran en ventanas modales aquellas imágenes que corresponde.

Soy programador web y me desempeño como Líder Técnico en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

3 thoughts on “Lightbox en WordPress para las páginas single

  1. Hola que tal?? escribo para consultar si pueden ayudarme con el siguiente problema: como veran en este link http://estiloalfa.com.ar/paneras/panera-croco
    las funcionalidades de lightbox o de fancybox, no se cual esta instalado o como es el tema, no funcionan,,,podran observar que al pasar por las flechitas de las fotos , éstas no aparecen en la caja de las fotos, y tmb. al hacer click en ellas se abren en otra ventana, es decir el pop up de las imagenes no fuinciona.
    tienen idea de que puede estar pasando? esto dejo de funcionar solo sin que realice ningun cambio,,desde ya muchas gracias.
    saludos y ojala puedan ayudarme

  2. Francisco

    Si bien Lightbox está cargando, el que parece estar ejecutándose es Fancybox. No estoy familiarizado con ese plugin. Tené en cuenta que a veces las actualizaciones de WordPress pueden llegar a cambiar algo de forma automática.

    Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*