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;
background-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/images/overlay.png”, sizingMethod=”scale”);
} - html #overlay{
- 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
Comentarios
La verdad q el script es una gozada y vo ya usarlo, pero habeis probado a usarlo con Iexporer... la verdad que da un poco de asco, salta la barrita de seguridad avisando de un complemento activeX que no deja ejecutar por lo que da error... ¿alguna solucion a esto? lo digo porque no todos usan Firefox, como algunos de nosotros... yo mismo a veces tiro de Iexplore porque en mi curro lo necesito ;)
Como dice en la web del autor, es necesario usar navegadores modernos, y ya sabemos que Internet Explorer no es nada moderno ;)
muy bueno y ademas util, tambien uso wordpress asi que seguire tus recomendaciones
Yo uso explorer, y lo he visto bien, el problema me ha venido cuando voy a ver las fotos por segunda vez, se queda pillado cargando...
Bueno, la verdad es que el primer contacto con estas librerias de javascript es una gozada, pero siempre hay que intentar sacarles los fallos, sabeis de alguna pega que pueda tener? o limitación, a parte de la de su uso claro.
Saludos.
Trackbacks