Join Chris Converse for an in-depth discussion in this video Adding and linking the thumbnail images, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
- View Offline
Now, we're going to add some thumbnail images.…Let's get your cursor inside of the gallery_thumbnails div, after the k, in that…default text we put in there.…Come up to the Insert panel > Insert Image > acrobats_thumbnail.jpg. Click Choose.…Enter some Alternate text. Click OK.…I am going to click on this and select it.…Down on the Properties panel, I am going to come down to the Link area here and…I am going to create a hyperlink around this image.…So let's click on the little folder, and we want to link it to the…acrobats_fullsize.jpg. Then click Choose.…
And when I click away, I can see this blue highlight around the outside, letting…me know that this image actually contains a link to the high-resolution file. Let's test this.…Choose File > Save All, and then Option+F12 or Alt+F12, Command+R or Ctrl+R to reload,…and I can see my gallery here.…Let's roll over the thumbnail.…I get a little pointer. I click it,…and it links me over to the full-sized JPEG.…Then I can use the browser's Back button to go back.…
Download a copy of the finished web site here.
- Preparing gallery photos using Adobe Bridge
- Adding and linking thumbnail images
- Creating the layout in HTML and CSS
- Downloading and adding jQuery to the project
- Creating preview images from anchor links
- Implementing the preload functionality
- Building a customized lightbox with the Fancybox plug-in
- Styling the zoom and contact links