-
Javascript a la mesa de luz Tutorial
-
Es una caja de luz libre de código abierto biblioteca JavaScript que se puede utilizar para presentar una galería de imágenes en su página web de una manera visualmente atractiva. Cuando un usuario hace clic en una de las imágenes en miniatura, la mesa de luz se atenuará el fondo de la página y el zoom la imagen para llenar la ventana del navegador. El creador de la mesa de luz ha hecho posible añadir esta funcionalidad a su sitio web con sólo unas pocas modificaciones menores en el código HTML.Instrucciones
1 Abra su navegador Web y vaya a la página de la mesa de luz hogar (ver Recursos). Descargar la última versión de la biblioteca.
2 Extrae el archivo ZIP que ha descargado. Contiene un archivo HTML de ejemplo y tres carpetas: "css", que contiene las hojas de estilo utilizadas por la mesa de luz; "imágenes", que contiene las imágenes utilizadas por la biblioteca; y "JS", que contiene el código fuente de la mesa de luz, así como las librerías Prototype y Scriptaculous que son requeridos por la mesa de luz.
3 Copiar el "css", "imágenes" y "carpetas" js a una ubicación que es accesible desde su página web. Los pasos restantes asumirán que los ha colocado en el mismo directorio que el archivo HTML; si los pone en un lugar diferente, tendrá que ajustar las trayectorias de estas medidas en consecuencia.
4 Abra el archivo HTML que va a utilizar la mesa de luz en su editor de texto preferido.
5 Si no está utilizando las librerías Prototype y Scriptaculous en su página web, añadir las dos líneas siguientes en la sección "<head>" del archivo HTML:
<Script type = sección "text / javascript" después de las líneas que cargan Prototype y Scriptaculous:
<Script type = "text / javascript" href = "css / lightbox.css" type = "text / css" media = "pantalla" />
7 Añadir el efecto de la mesa de luz a cualquier enlaces de imagen, añadiendo el atributo rel = "caja de luz" a "<a>" del enlace, y proporcionar un título opcional que se mostrará en el cuadro emergente. Por ejemplo, si usted tiene un enlace de la siguiente forma:
<a href="Image1.jpg"> <img rel = "caja de luz" title = "Una imagen de ejemplo"> <img src = "Image1Thumbnail.jpg" /> </a>
Consejos y advertencias
- Las imágenes también se pueden agrupar, lo que permite al usuario navegar rápidamente a la imagen anterior o siguiente en una galería sin cerrar y volver a abrir la ventana de la mesa de luz. Para asociar una imagen con un grupo, poner el nombre del grupo en corchetes después de "caja de luz" en el atributo "rel". Por ejemplo:
- <a href="Image1.jpg" rel="lightbox[group]" title="un ejemplo imagen"> <img src = "Image1Thumbnail.jpg" /> </a>
- El usuario puede hacer clic en el botón "Siguiente" "Anterior" y en la mesa de luz para desplazarse por el conjunto de imágenes que comparten el mismo nombre de grupo.
