Usted probablemente ha visto el efecto de luz en el trabajo durante sus viajes en la web, aunque no puede haber sabido que se llamaba Luz. En esencia, el visitante hace clic en una miniatura de la galería de imágenes, y una versión más grande aparece en la parte superior de la página, de regulación de contenido de la página detrás de él. Este efecto ampliamente utilizado hace uso de jQuery y fue escrito originalmente por Leandro Vieira Pinho. El efecto real de la mesa de luz se activará por medio de hipervínculos que nos planteamos en nuestra página. Son muy pulido, y en este tutorial, vamos a aprender a construir uno en Dreamweaver !

Paso 1

En primer lugar, asegúrese de que descargue los archivos de proyecto para este tutorial. Descomprimir el archivo y almacenar los archivos de proyecto en una ubicación que pueda recordar, al igual que su escritorio. Dentro de la carpeta archivos de proyecto que usted encontrará dos carpetas más, los "activos" e "imágenes". Que contienen todos los componentes que necesita.

Paso 2

Ahora, seguir adelante e iniciar Dreamweaver y seleccione Sitio

Paso 3

A continuación, crear una marca en blanco nuevo archivo, dar la vuelta en vista de código, a continuación, pegue

Este código contiene los enlaces a las externas JavaScript y CSS que tendrá nuestra página, así como algunas funcionalidades adicionales. Asegúrese de guardar el archivo en la carpeta que ha definido como un sitio arriba.

Paso 4

Ahora estamos listos para la estructura de la página, es decir, el marco que va a mantener nuestra miniaturas. Vaya por delante y pegar

Como puede ver, hay un exterior "lightboxgallery"

Paso 5

Ahora necesitamos que nuestros miniaturas. Deja tu cursor en la primera miniatura

Paso 6

Con nuestra miniaturas en su lugar, ahora es el momento para atar todo junto y obtener el script de la mesa de luz pasando. Como se mencionó anteriormente, el guión de nuestra mesa de luz va a ser activado con hipervínculos, así que iremos y establecer enlaces para las versiones más grandes de cada imagen y luego probar los resultados.

Dé la vuelta a la vista Diseño, seleccione la miniatura primera imagen; a continuación, en el inspector de propiedades, haga clic en "Buscar archivo" (el icono de carpeta situado junto al campo de enlace). Vaya a la imagen a tamaño completo correspondiente en la carpeta "Imágenes". En este caso, "fullsize1.jpg". Repita esto para cada imagen en miniatura, que une cada uno a su contraparte de tamaño completo.

Paso 7

Finalmente estamos listos para probar cosas! Guarde el archivo y, a continuación, elija Archivo

Echa un vistazo a estos

Crear los archivos del proyecto Galería de imágenes Álbum