All Articles Dreamweaver
Crear una mesa de luz Galería de imágenes con jQuery en Dreamweaver
Geoff Blake on Sat, June 18th | 9 comments
You've probably seen the Lightbox effect at work during your travels on the web, although you may not have known that it was called Lightbox.

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

Comments (9)

You must be logged in to comment. Login Now

  • Hi there, I can't seem to find the project files(zip folder) to download, that is needed for this tutorial???
    • 7 years ago
    • By:
    Reply
  • Rounik Admin
    Hi, They are hyperlinks in the text (in blue) in Step 3, Step 4 and the very last line of this tutorial is a link: "Create Image Gallery Lightbox Project Files". Just click on these to begin downloading the files. Hope this helps Rounik
    • 7 years ago
    • By: Rounik Admin
    Reply
  • Thanks for the reply. I have a website up but I want my photography page to have a lightbox, but when I try and do it on the content page which is an ap div, it doesnt seem to show up at all??? Am I doing something wrong with placing the code maybe???
    • 7 years ago
    • By:
  • Thanks for the previous reply. I now got that done but I have a website already up but I want to have a lightbox on my photography page in the content area. The content area box is an ap div though, and I did the exact same procedure with the code and all but it doesnt show up when I refresh the page????
    • 7 years ago
    • By:
    Reply
  • Un souci ds votre tuto je ne trouve pas les code a copier coller ds dreamweaver ds le fichier que jai telecharger et dc je peu rien fr sur dream sauf si fo recopier ce que vous avez marquer sur votre excemple tuto
    • 6 years ago
    • By:
    Reply
  • wow!!!this tutorial was helpful....but what about prev,next,close and loading icons....hope you will provide the tutorials about that...
    • 6 years ago
    • By:
    Reply
  • azex
    hi, 4 images is looks simple. but, how about if the images is hundred over..? do i need to edited one by one? any other way to simplify it.
    • 6 years ago
    • By: azex
    Reply
  • Ian
    Thanks Geoff, That's a fantastic tutorial for someone like me who sits more on the creative side but sometimes needs to pretend he is a programmer!! The code works perfectly well. I am wondering if there is a fairly simple option - or a tutorial of yours somewhere else - to show how to add descriptive text for each image when it is displayed in the Lightbox, rather than just the "Image 4 of 14" text? Cheers, Ian
    • 6 years ago
    • By: Ian
    Reply
  • Emily
    Is there a way to add HTML content (like another webpage) to pop up in the lightbox as well?
    • 6 years ago
    • By: Emily
    Reply
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: