Join Chris Converse for an in-depth discussion in this video Save For Web & Devices in Photoshop, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
So now we that have our HTML and CSS files created and our external file links to the CSS file,…I'm going to minimize this. And now what we want to do is create some of the…assets that we're going to need from Photoshop, some of the graphics, to…recreate our layout.…So one of the first things I recommend doing in any interactive project and web…site project is coming up with a sketch.…You can draw this out in a notebook or use something like Illustrator or…InDesign, and just come up with some of the measurements of the different…pieces we're going to need, so that we can create individual slices inside of…Photoshop and then recreate CSS in order to recreate some of those objects.…
So in this sketch here, what we're going to be creating for our photo gallery…are a series of thumbnails that are going to be 75 x 75 pixels.…Our preview areas is going to be 375 pixels wide.…We're going to have the container that's going to be 500 pixels wide…that's going to hold all of the thumbnails. And then we're going to have our…
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