Styling the thumbnail links with CSS
Video: Styling the thumbnail links with CSSNow, before this movie, I've set up the additional 19 thumbnails. Just drag them inside of Dreamweaver, following the process we looked at in the last movie and then linking each one to the full size, and then in addition, adding a custom caption into each one that just includes the file name somewhere. This way we can actually check in jQuery to make sure that the caption we're going to pull out of here gets populated into the caption area properly. Now, you can change the order of the images by simply changing the order of the anchor tags inside of here. And if I switch to Design view, this is what we're looking at.
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
Styling the thumbnail links with CSS
Now, before this movie, I've set up the additional 19 thumbnails. Just drag them inside of Dreamweaver, following the process we looked at in the last movie and then linking each one to the full size, and then in addition, adding a custom caption into each one that just includes the file name somewhere. This way we can actually check in jQuery to make sure that the caption we're going to pull out of here gets populated into the caption area properly. Now, you can change the order of the images by simply changing the order of the anchor tags inside of here. And if I switch to Design view, this is what we're looking at.
Now, in here I'm going to choose File > Save All and then Option+F12 or Alt+F12 to take a look at this in our default browser. Hit Reload. Now, Safari is showing me these images here without a border around the outside. But if I take the same file, go back to Dreamweaver-- let's preview this in Firefox-- Firefox will actually show me the blue border of the hyperlink around the individual images. Internet Explorer will do the same thing. So what we want to do is let's close our two browsers, come back to Dreamweaver, go into the CSS Styles panel.
Let's create a new rule. It will be a compound rule. We're going to type 'a img'. We're going to target image tags only if they're inside of anchor tags, and what we want to do is come into the Border settings. On Same for all, we're going to set None for style, so there will be no border assignments on images that are inside of anchor tags. We'll click OK. We'll choose File > Save All. Let's go look at this in Firefox one more time. And now Firefox will show me these without the borders around the outside.
Now, each one of these items will link properly, so I can click these and go to each high-res image. Click the Back button. So now that the functionality is in place, let's go style the thumbnails. Let's close our browser. Let's go back to Dreamweaver. Let's come over to our CSS Rules. I'm going to create a compound rule. Now, one of the nice things about Dreamweaver is, when we have our cursor inside of an area and we click Compound Rule here, it will attempt to build a compound rule for us. And we actually do want a target inside of gallery_thumbnails, so I'm going to delete all of this text here. Or I could simply click More or Less Specific to take out the full path of all of the nested classes.
So gallery-thumbnails, we're going to do ' a'. We're going to target the anchor tags. We're going to click OK. One of the first things I'm going to do is come under the Block properties, set the Display to block. Anchor tags by default have a display style of inline. We're going to change that to block. Let's come under the Box settings. We're going to set these to 75 x 75 pixels. We're going to set Float left. I'm going to go to Border. Under Same for all, we're going to click Solid, 1 pixel.
We're going to pick the same medium gray that matches the border of our design. Lastly, let's go to the Box properties. We'll set 0 for all of the padding. For the Margin, we're going to set 0 on the Top, 23 pixels on the Right, 23 on the Bottom, and 0 on the Left. Now when I click Apply, this will space these out, so now each thumbnail will have no other thumbnails within 23 pixels of its right and bottom, and that will space the cell to give us exactly five across and four rows down, equaling our full 20 thumbnails. Let's click OK.
Let's create another rule, another compound rule. Click Less Specific, gallery_thumbnails a: hover. We'll add a pseudo-class to these, so when we hover over these, we want to simply come in, change the border to white, click OK. We can test this by clicking Live view or Preview in Browser. Now when I roll over these, the border turns white. And let's create one more class.
This is going to be the selected state. So whichever photo we happen to be looking at in jQuery, we're going to add this class. So I'm going to type a.selected, so any anchor tags inside of gallery_thumbnails that also have a class on them, I've selected. We're going to come in here, do the same thing in the border. We're just going to set that to be white. We're also going to set the photo inside to be semitransparent, but that's a function we're going to add in jQuery. Then we'll click OK.
Now to test this, I'm going to come out of Live view. I'll click on one of these images, down here in Dreamweaver's document tree. I'll click on the a for the anchor tag. Click on Class. Let's select Selected. Let's click away. Let's go back into Live view, and I can see that this one is now in its selected state because the border is not white. So that works. Let's take that off.
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.