All Articles Dreamweaver
Create a jQuery Image Gallery Lightbox 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.

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. Essentially, the visitor clicks on a thumbnail from the image gallery, and a larger version appears on top of the page, dimming out the page's content behind it. This widely-used effect makes use of jQuery and was originally authored by Leandro Vieira Pinho. The actual Lightbox effect will be triggered by hyperlinks that we set on our page. They're very slick, and in this tutorial, you're going to learn how to build one in Dreamweaver!


Step 1

First, make sure and download the project files for this tutorial. Unzip the file and store the project files in a location that you'll remember, like your desktop. Inside the project files folder you'll find 2 more folders, "assets" and "images". They contain all the components we'll need. 


Step 2

Now, go ahead and launch Dreamweaver and choose Site > New Site to define a new site. When you're defining your site (choosing the Root Folder), make sure to point to the project files folder that you've downloaded.


Step 3

Next, create a brand new blank file, flip into Code View; then paste the code contained in this 1st text file into the head area of your page.

This code contains the links to the external JavaScript and CSS files that our page will need, as well some additional functionality. Be sure to save your file into the folder you defined as a site above.


Step 4

Now we're ready for the page's structure — that is, the framework that'll hold our thumbnails. Go ahead and paste the code contained in this 2nd text file into the body of your page:

As you can see, there's an outer "lightboxgallery" which contains four thumbnails. If you want to expand your gallery to accommodate more image thumbnails, it's no problem. Just copy and paste the thumbnail code, as many times as you need.


Step 5

Now we need our thumbnails. Drop your cursor into the first thumbnail and then choose Insert > Image. Navigate into the "images" folder and choose "thumb1.jpg." Repeat this for the other thumbnails.


Step 6

With our thumbnails in place, it's now time to tie everything together and get the Lightbox script happening. As mentioned earlier, the script for our Lightbox is going to be triggered with hyperlinks, so we'll go and set links for the larger versions of each image and then test our results.

Flip over to Design View, select the first thumbnail graphic; then on the Properties Inspector click 'Browse for File' (the folder icon next to the Link field). Navigate to the corresponding full size image in the "images" folder. In this case, "fullsize1.jpg." Repeat this for each thumbnail, linking each to their full size counterpart.


Step 7

We're finally ready to test things out! Save your file, and then choose File > Preview In Browser, and then select the browser that you'd like to preview your work in. Once the browser launches, go ahead and try clicking on your image thumbnails. If you followed the steps, the large version of the image will appear in a Lightbox. Cool!

Check out these Dreamweaver Video Tutorials & Download the accompanying project files below:

Create Image Gallery Lightbox Project Files

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: