All Articles Dreamweaver
Creare un jQuery Lightbox Galleria di immagini in 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.

Avete probabilmente visto l'effetto Lightbox al lavoro durante i viaggi sul web, anche se può non sapere che è stato chiamato Lightbox. In sostanza, il visitatore fa clic su una miniatura dalla galleria di immagini, e una versione più grande appare in cima alla pagina, oscuramento i contenuti della pagina dietro. Questo ampiamente utilizzati effetto fa uso di jQuery ed è stato originariamente scritto da Leandro Vieira Pinho. L'effetto Lightbox reale sarà attivato da collegamenti ipertestuali che abbiamo impostato sulla nostra pagina. Sono molto lucida, e in questo tutorial, avete intenzione di imparare a costruire uno in Dreamweaver !


Fase 1

Innanzitutto, verificare e scaricare i file di progetto per questo tutorial. Decomprimere il file e memorizzare il file di progetto in una posizione che ti ricordi, come il vostro desktop. All'interno della cartella del progetto file troverete 2 cartelle più "attivi" e "immagini". Essi contengono tutti i componenti abbiamo bisogno.


Fase 2

Ora, andare avanti e lanciare Dreamweaver e scegliere Sito


Fase 3

Successivamente, creare un nuovo file vuoto di marca, a spostarsi nella visualizzazione del codice e poi incollarlo

Questo codice contiene i link ai file esterni JavaScript e CSS che la nostra pagina sarà necessario, come pure alcune funzionalità aggiuntive. Assicurati di salvare il file nella cartella definita come un sito di cui sopra.


Fase 4

Ora siamo pronti per la struttura della pagina che è, il quadro che ti tenere le nostre miniature. Vai avanti e incolla

Come potete vedere, c'è un esterno "lightboxgallery"


Fase 5

Ora abbiamo bisogno del nostro miniature. Cadere il cursore nella prima miniatura


Fase 6

Con la nostra miniature in posto, è giunto il momento di legare tutto insieme e ottenere il successo script di Lightbox. Come accennato in precedenza, lo script per il nostro Lightbox sta per essere attivato con collegamenti ipertestuali, per cui andremo a impostare i collegamenti per le versioni più grandi di ogni immagine e quindi verificare i nostri risultati.

Capovolto per Progettazione Visualizza, selezionare la prima miniatura grafica, poi sulla finestra di ispezione Proprietà fare clic su 'Browse for File' (l'icona della cartella accanto al campo Link). Passare alla corrispondente immagine full size nella cartella "immagini". In questo caso, "fullsize1.jpg". Ripetere questa operazione per ogni miniatura, collegando a ciascuno di loro controparte full size.


Fase 7

Siamo finalmente pronti a collaudare il tutto! Salvare il file e quindi scegliere File

Dai un'occhiata a queste

Crea immagine Galleria file di progetto Lightbox

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
    • 7 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: