LeegaR Blog

Imagenes con efecto “Lightbox” en WordPress…

LightBoxEs normal que en las publicaciones de una bitácora se acompañe el contenido por una imagen que le brinda al artículo una mejor presentación, que incentiva sin dudas a la lectura del mismo… También existen casos en que la imagen que queremos compartir sea demasiado grande, o por ejemplo que utilicemos WordPress para en vez de un blog hacer un fotolog donde en cada artículo colocamos muchas fotografías (como estoy haciendo a nivel personal en Nahuel Sanchez)…

En este último caso, donde las fotografías son demasiado grandes y recurrimos a las miniaturas, las cuales enlazan a la imagen en su tamaño original, podemos utilizar el plugin Lightbox, el cual al hacer clic en una imagen en miniatura desplegará la misma en su tamaño original en una nueva capa sobre la misma ventana de navegación, sin necesidad de que se recargue una nueva página… Se que es difícil de comprender, pero se entiende con facilidad al ver el sistema en funcionamiento (en LeegaR Blog no lo he incorporado, pero cualquier foto que vean en Nahuel Sanchez tiene incorporado el efecto Lightbox)…

La integración del efecto a WordPress se realiza simplemente subiendo el plugin Lightbox y activándolo… Una vez activado deberemos modificar el código del enlace de cada imagen que queramos que sufra el efecto Lightbox ya que no es automático (por lo cual en un artículo podemos colocar imágenes tanto con el efecto como sin el efecto, dependiendo de nuestras pretensiones)… Por ejemplo, un código común y corriente de una miniatura que enlace a la imagen en tamaño original es el siguiente:

<a href=”http://www.leegar.com.ar/imagen-original.gif”><img src=”http://www.leegar.com.ar/imagen-miniatura.gif” width=”125″ height=”125″ /></a>

Para que dicha imagen se despliegue de forma original en la misma página, utilizando el efecto Lightbox, deberemos agregarle, al código del enlace (no al código de la imagen) la etiqueta rel=”lightbox”, quedándonos el código de la siguiente forma…

<a href=”http://www.leegar.com.ar/imagen-original.gif” rel=”lightbox”><img src=”http://www.leegar.com.ar/imagen-miniatura.gif” width=”125″ height=”125″ /></a>

El efecto es realmente muy lindo y personalizable mediante hojas de estilo, además de simplificarle la navegación al usuario… Les recomiendo que vean en funcionamiento este sistema antes de incorporarlo para decidir si es o no necesario en su bitácora… Saludos…