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
