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 !
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.
Ahora, seguir adelante e iniciar Dreamweaver y seleccione Sitio
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.
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"
Ahora necesitamos que nuestros miniaturas. Deja tu cursor en la primera miniatura
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.
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
You must be logged in to comment.