Join Chris Converse for an in-depth discussion in this video Adding CSS properties for main container, part of Creating an Interactive Photo Gallery with jQuery and Dreamweaver.
Now, we want to apply CSS styles to the four divs that are inside of the…gallery_content area, inside of that content div.…So let's start by coming up to the thumbnails, gallery_thumbnails.…Let's go to the Box properties. 500 pixels wide. Float left.…We're going to set zero for all of the padding.…Margin, we're going to set zero on the top, right, and bottom, and 40 pixels on the left.…Now sometimes when I'm setting up my divs and setting up the layout I'll…temporarily come in and set a Background-color so I can see them and see how…wide the properties are.…
So temporarily, let's come in here and we'll just assign a color to the…background of the thumbnails. Click Apply.…Now I can see that Yellow bar here is representing the area for the thumbnails. Let's choose OK.…Let's open up gallery_preview, Box properties for preview. I'm going to set 375…on the Height and the Width.…This is going to hold that preview-size jpeg.…This is also going to float left. 0 for all margin and padding.…
Let's go to the Background-color and let's just temporarily set a color, so we…
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