Join Chris Converse for an in-depth discussion in this video Adding CSS properties for main container, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
- View Offline
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