Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104321 Viewers
56 Video lessons · 116235 Viewers
71 Video lessons · 85455 Viewers
131 Video lessons · 40917 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.