Lightbox imagenes emergentes

Posted on Lunes, junio 1, 2009 in Internet, Wordpress

Lightbox es un script hecho en javascript que nos muestra imágenes emergentes en nuestro mismo sitio y con un acabado espectacular.Este script mostrará tu imagen encima de toda tu web sin cargar otra ventana de nuestro navegador y con opciones de galeria para anterior y siguiente si creas una galeria.Este plugin nos permite modificar colores de fondo a nuestro gusto.

En primer lugar debemos descargar la útlima versión de nuestro nuevo plugin y descomprimir en nuestro directorio (wp-content/plugins) .Lo activamos y ya esta listo para configurar.

Este javascript utiliza unas librerias determinadas Prototype y Scriptaculous por eso tendremos que añadir las nuevas librerias en el head de nuestro código html.Y en nuestro caso concreto ir al header.php de nuestro theme y añadir en la cabecera y por orden las siguiente lineas de código.

Y introducir los estilos en nuestro header para que tenga la apariencia que hemos creado. Y ya tenemos el plugin configurado. Su uso no es mas complicado que su instalación solo debemos copiar el siguiente código en cualquier post o página en la que queramos que tenga el efecto. Es decir ponemos el enlace de la imagen y añadimos una etiqueta rel=”lightbox” que enlaza con nuestro script de lightbox. Un ejemplo sería:

Y nos aparecería de la siguiente manera.

<a title=”Imagen lightbox” rel=”lightbox” href=”http://elblogdeerik.com/wp-content/uploads/2009/06/playa.jpg”>Imagen</a>

Imagen

Si de lo contrario preferimos que nos salga una muestra de la imagen que vamos a mostrar cambiamos “Imagen” por

<img src=”images/miniatura.jpg” alt=”Webmaster” height=”124″ width=”124″ />
href= “Contiene la ruta del enlace a la imagen”
title= “Nuestra leyenda de la imagen al mostrarse”
img src=“Aqui es donde ponemos la ruta de enlace a la imagen de muestra”
height=” la altura en pixels”
width=” la anchura en pixels”

Y ya tenemos montado lightbox para crear ventanas emergentes.