Join Chris Converse for an in-depth discussion in this video Implementing the preload functionality, part of Creating an Interactive Photo Gallery with jQuery and Dreamweaver.
We're going to set the HTML, beginning and ending parentheses, a semicolon.…Inside of here, we are going to set a string literal, image, source, equals, two…quotes, forward slash, end bracket. And inside there, we're going to put a letter x.…So what we're going to do is take the preload area and put an image tag in that area.…
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