- -

Lightbox es un script de fácil instalación que nos permite enlazar desde nuestros sitios web a imágenes sin tener que abrir ventanas o pestañas del explorador. Para ello presionamos sobre un enlace en concreto, se nos oscurecerá la web y nos saldrá en primer plano la imagen. Despues, presionamos la imagen y volvemos a la web en primer plano.

Muy útil para no tener que abrir pestañas o ventanas del navegador, haciendo la navegación por el sitio web más atractiva ya que en el sitio del creador nos da las herramientas y las instrucciones correspondientes para insertarlos en nuestra web. Yo ya lo tengo instalado en mi wordpress personal y funciona:

• Insertar el script en tu cabecera, si usas wordpress lo insertas en header.php

• Añade a tu enlace la etiqueta rel="lightbox":image #1

• Inserta unas líneas de código en tu hoja de estilos:#lightbox{background-color:#eee;padding: 10px;border-bottom: 2px solid #666;border-right: 2px solid #666;}

• Si deseas crear el efecto de sombras, deberás de usar un archivo PNG y un código extra en tu hoja de estilos:#overlay{ background-image: url(overlay.png); }

• html #overlay{background-color: #000;back/ground-color: transparent;background-image: url(blank.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/overlay.png", sizingMethod="scale");}

• Si deseamos introducir la barra de carga de la imagen deberemos comprobar que la imagen loading.gif este correcto, y para ello entramos en el script lightbox.js y buscamos la línea:var loadingImage = 'loading.gif';para modificar la ruta en caso de que la imagen esté en otro directorio.

Estas mismas intrucciones y la descarga del script y de las imágenes la tenéis en la web del autor, cuyo enlace os pondremos al final de este artículo:

Enlace | Lightbox JS