Adding CSS properties for main container
Video: Adding CSS properties for main containerNow, 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.
Viewers: in countries Watching now:
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
Adding CSS properties for main container
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 can see this one. I'll choose Blue. Click Apply. Now I can see that div in place. Let's click OK. Just scroll down here a little bit. Now, let's open in gallery_contact. This is going to be the email address on the bottom-left, under all the thumbnails. Box properties, 477 wide, 60 pixels tall.
This is also going to float left. For the padding, we're going to set 0 on the top, 23 on the right, 0 on the bottom, 0 on the left. So we want this to be 500 pixels total, and web browsers will add right and left padding to the overall width of the object, so 477 plus 23 gives us our 500. Uncheck Same for all for Margin, and we're going to set 0 on the Top, 0 on the Right, 0 on the Bottom, and the same 40 pixels on the Left for that as well.
Background, let's just again temporarily pick a color so we can see that one. I'll choose green. Click Apply. I can see that box showing up here. Let's click OK and lastly, let's go to gallery_caption. I'll move this up over here. Box properties for that, we're going to set 375 on the Width. That's also going to float left. We're going to say 0 margin, 0 padding for all. Background, select violet.
Click Apply. Choose OK. Now I can see the four divs we just created inside the content area: So the thumbnail is here in yellow. The image preview over here on the right. The contact area. And there's one thing I forget to set. Let's go back to contact real quick. Block properties, we want the text-align to be align right. Click OK. Now that I can see that all of my divs are in place and properly spaced out, I am going to quickly get rid of those backgrounds.
The quickest way to do that would be to just jump over to the code. I'll scroll down to the rules that we just added. background-color for thumbnails, let's just delete that. gallery_preview background _color, let's delete that. gallery_contact, I'll delete that. And then lastly gallery_caption, delete that. Switch to HTML. At this point, let's choose File > Save All, and now we are ready to start creating the content that goes inside of these containers.
Find answers to the most frequently asked questions about Create an Interactive Photo Gallery with jQuery and Dreamweaver .
Here are the FAQs that matched your search "" :
- 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?
- A: The functionality you describe is part of FancyBox plug-in we use in this course. It's a custom lightbox tool, which I've included in the exercise files and also available for download at fancybox.net. It's free and highly customizable.
By default, FancyBox adds a border to images (at least in the version of FancyBox we're using), but there are many options that can be turned on when you set up your fancybox initialization script, including the close button, which is invoked using the showCloseButton property. This is all covered in the "Creating a custom function for lightbox properties" movie.
If you want to customize your gallery further, look at the list of the customizable properties at http://fancybox.net/api.
- 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
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.