Join Chris Converse for an in-depth discussion in this video Changing the caption when clicking thumbnails, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
- View Offline
Inside our Click function for all of the images, I want to add a second…statement, and we are going to update HTML that's part of the gallery caption as well.…So let's start off with a Dollar sign, string literal 'gallery_caption.html', beginning…and ending parentheses, semicolon.…Inside here, let's start our string literal.…Let's start off with a beginning and ending P tag.…Inside of our paragraph tag, the first thing we are going to add is going to be an anchor tag.…
Let's end the anchor tag, set an href attribute inside, open the letter x in…there. And in here, we are actually going to say View larger.…Come after the P tag.…Let's start a new p tag and an ending p tag. And inside of here, we are going to…put a letter x. Now back in our href tag, let's add in title attribute, two…quotes and the letter x. Now are going to come in here and replace these with the…actual variables. So the href, this is going to be a text link which will also…link to the full-size preview, and we will add classes later to initiate the…
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