Join Chris Converse for an in-depth discussion in this video Using GREP for more intricate file renaming, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
Now in the exercise files let's open the preview_sizes.psd.…Now, what I've decided to do here is to take each photograph one by one and…custom crop each one of these photographs so that I get the optimal preview image.…If I open up the refraction_fullsize. jepg, this is the size of the large file…we're going to load into the lightbox. And instead of using automated tools…like tools found in Photoshop or Bridge or Lightroom that will automatically…resize a series of images,…I want to spend the time and custom crop to get exactly the look that I want…from taking this horizontal picture into a square picture we're going to use…for our preview.…
So I've created these two Photoshop files with all of the layers labeled exactly…the same file names as the full-size images that we just moved over from the…full-size graphics in the exercise files.…So what I want to do here is export from this Photoshop file out to a series of files.…So what I'm going to do first, on the desktop, I'm going to click right here and…
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