Image galleries provide an excellent way to showcase your photos and engage your viewers.
The Lightbox jQuery plugin is a free resource that you can use to create image galleries in a snap.
This video shows how to make an image grid and use the lightbox plug-in to display a slideshow of images.
The structure of the gallery project is simple.
Let's take a look in the Files panel.
Download and unzip the project files to follow along on your own.
I'll start by switching to the Design workspace.
The project includes an images folder with low res and high res images, the Lightbox plug-in folder and a gallery.html and gallery.css file.
I'll work with the HTML and CSS files in Split view, as I complete the gallery setup.
You can see in Live view that I've already created an image grid.
Rolling over an image displays a caption and toggles full opacity making the interactivity more engaging as you explore the grid.
In Code view, you can see that each preview is created with an anchor tag and a div wrapping another div tag and an image tag.
The nested div tag contains the caption.
I can use Live view, as an easy way to navigate to CSS.
Select the image and then use the up arrow to navigate to the div tag and then right-click on the selector and choose "Go to Code".
Here you can see the CSS that creates the rollover effect when you hover over the image.
And the styles for each of the elements in the image grid.
And now that you know how an image grid is setup, it's easy to activate the Lightbox plugin.
Simply link to a few files and set up your anchor tags.
Looking at the head tag in the HTML file, you can see that I've already linked to the three resources required for Lightbox. jQuery, the Lightbox JavaScript file, and the Lightbox CSS file.
Next, I'll complete the setup by adding attributes to the anchor tags.
Lightbox uses data attributes to identify which image to load and to assign it a title.
I'll select the anchor tag using Live view, then press Control T or Command T on my Mac to bring up the Quick Tag Editor in Edit mode.
To activate Lightbox, I'll add the data Lightbox and data title attributes.
And that's it.
From here, I'll update the remaining anchor tags with the data attributes.
Doing so launches the image in Lightbox whenever you click on the preview.
So, at this point, I can check my design to confirm that the Lightbox slide show is working.
I'll turn off Selections in Live view for a moment by choosing View, Live View options, Hide Live View Displays, or Control Alt H or Command Alt H on my Mac.
And in Live view, roll over the previews and click on them to launch Lightbox.
And finally, I'll choose File, Preview in Browser and take a look at the page.
And it's that easy to setup an engaging image gallery.
As you can see, setting up an image gallery is easy to do using Dreamweaver and Lightbox.
Use Live view to preview and edit your work and quickly navigate code and use Code view and Quick Tag Editor to dial in your settings.
Try creating a project with the same structure and see how you can build a portfolio gallery in just a few steps Launch Dreamweaver and give it a try.
