Join Chris Converse for an in-depth discussion in this video Changing the caption when clicking thumbnails, part of Creating an Interactive Photo Gallery with jQuery and Dreamweaver.
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
Skill Level Intermediate
Q: The finished state of the interactive photo gallery in this course shows a clickable preview. When you click on the preview image, or on the view larger icon, a larger lightbox image appears. Chris's example has a close button and border surronding the large image, but mine doesn't. Did I miss a step?
Q: This course was updated in April, 2013. What changed?
A: Since the release of this course, Internet Explorer 9 and 10 have been released, and sometimes these browsers do not activate interactive HTML content. To remedy this problem, the author has added a movie to Chapter 10 that will show you how to:
- Update the HTML to HTML5
- Update the version of jQuery
- Use the Google html5shiv to keep compatibility with Internet Explorer 7 & 8