Image Galleries9:43 with Nick Pettit
In this video, we'll learn how to arrange images into rows and columns. Arranging images in a gallery can seem like a daunting task, but it's actually a lot like creating horizontal navigation.
[? Music ?] 0:00 [Think Vitamin Membership] [membership.thinkvitamin.com 0:03 [CSS Techniques: Image Gallery] 0:07 [Nick Pettit] Arranging a bunch of images in an image gallery can seem like a daunting task. 0:12 However, by using HTML and CSS, it's actually pretty simple. 0:18 Here we have our images directory, and we have a shot of Big Ben, we have 0:23 City Hall, and we have several other shots around London, and as you can see, 0:28 they're all sized to be exactly the same so that they'll fit together 0:35 very nicely in an image gallery. 0:38 Currently, our web root is blank, but that's all about to change. 0:42 So let's go ahead and switch over to TextMate. 0:46 And as you can see, we just have a very basic HTML page. 0:49 We've already included our CSS document so that when we start writing CSS 0:53 it will already be on our page, and the first thing we're going to do is 0:59 is create a wrapper div. 1:02 So I'll just go ahead and create a div here with the id of "wrapper." 1:04 And this will just help us to center everything on the page. 1:09 So I'll go ahead and make some room for us to work here. 1:13 And inside of our wrapper div, we're going to go ahead and create an unordered list. 1:16 Just like that. 1:24 And we'll create a few list items here, and inside of each list item 1:26 we're going to create an image. 1:31 So we'll use the image tag and the source for this, in our case, 1:35 will be in the images directory, and our first image is called "bigben.jpg." 1:40 And I'll give it some alternate text, and we'll just say "Big Ben" and then we'll go ahead 1:48 and close our image tag. 1:54 I'm going to go ahead and copy and paste a few times here, and we have 1:57 8 images, so we'll just go ahead and copy those and paste them there. 2:03 And now we just need to quickly rename these. 2:08 So we have Big Ben, we have City Hall, we have the London Eye of course. 2:11 There's Parliament. 2:28 We have St. Paul's. 2:40 We have one of the towers on Tower Bridge, so for our alt text 2:52 we'll just say something like "Tower of Tower Bridge", and then we have a proper picture 2:56 of Tower Bridge, so we'll say "Tower Bridge" for our alt text. 3:05 And then, finally, we have a picture of one of the signs for the London Underground, 3:13 and we'll just say "Underground Sign." 3:19 So we'll go ahead and save that out and just for a quick sanity check 3:25 we'll switch over to the browser and refresh. 3:28 And as you can see, we now have all of our images right here in the browser, 3:32 and they're in the form of an unordered list, so they have these bullet points next to them. 3:37 But, we'll go ahead and get rid of those when we format them into an image gallery. 3:43 So let's go ahead and switch back over to TextMate, and let's open our CSS document. 3:48 The first thing we want to do is remove any kind of margin that might be 3:56 on the body of the document. 4:00 We could do more elaborate reset CSS but this will do for now. 4:02 Next, we'll go ahead and select our wrapper. 4:08 We'll set the width to about 960 pixels, and we'll set the margin to zero 4:12 for the top and bottom and auto for the left and right to center on the page. 4:18 Go ahead and switch back to Google Chrome and refresh. 4:23 And while this column of images doesn't appear to be in the center of the page, 4:28 all the content is indeed centered overall. 4:32 We'll go ahead and format these into an image gallery in just a moment. 4:37 So let's go ahead and switch over to TextMate, and we need to apply 4:41 a class or an id to our unordered list so that we can go ahead and select it 4:45 amongst possibly other unordered lists on the page. 4:52 So we'll go ahead and give it the id of "gallery", and we'll switch back to 4:56 our CSS document, and we'll go ahead and select our gallery. 5:03 And the first thing we want to do is remove any kind of list styling because 5:09 remember, our gallery is the unordered list element. 5:13 So we'll go ahead and say list style, none, and that will remove those bullet points. 5:17 And we'll go ahead and move this list down from the top by about 100 pixels 5:23 just using some margin. 5:30 So let's go ahead and switch back to Google Chrome and refresh, and as you can see, 5:33 we've moved it away from the top just to give it some nice spacing there, 5:37 and we've gotten rid of our bullet points on our unordered list. 5:42 So let's go ahead and continue here. 5:47 The next thing we want to do is style our list elements. 5:49 So first, we'll go ahead and float them to the left, and this is really 5:59 the trick of this gallery. 6:03 When you float something to the left or right, you allow other content to flow around it. 6:06 But, because we're floating everything to the left or to the right, 6:12 all the content is flowing around each other. 6:16 So really, it just appears as though the content is next to one another, 6:20 or that each picture in the gallery is next to one another. 6:23 Next, we'll go ahead and give each picture a margin of 5 pixels to give them 6:29 some separation amongst one another, and we'll give them 6:34 some padding of 5 pixels as well. 6:37 Now, when we go back to Google Chrome and refresh the page, you can see that 6:41 all of our images are in this really nice gallery. 6:46 Now, we can do a couple of different things here. 6:50 We could, for example, go ahead and swing this gallery in a couple different directions. 6:53 We can do this using CSS3 selectors. 7:00 So first, we'll go ahead and select our gallery. 7:04 Then we'll select each list item, and then we'll say "nth child" and then we'll say "odd." 7:08 And we'll say "clear both" so every other image will actually clear the line 7:20 that it's being floated on. 7:27 So if we go back to Google Chrome and refresh, you can see that we now have 7:30 more of a vertical gallery where there's only 2 columns and 4 rows. 7:34 So let's go ahead and undo this. 7:40 And one neat effect that we can do is sort of rotate each one of our images. 7:46 So first, we'll go ahead and select the 1st child, 7:52 and then we'll select the 5th child, and we'll only do this for WebKit, 7:57 but you could of course apply other vendor prefixes and make this work for 8:01 Firefox or Opera or really any other browser that supports this. 8:06 So we'll say "webkit-transform", and we'll rotate the 1st image and the 5th image by 2 degrees. 8:11 So let's go ahead and save that, switch back to Google Chrome 8:21 and refresh, and as you can see, our 1st image and our 5th image are rotated. 8:24 So let's go ahead and do this for all of these to sort of make a more 8:31 polaroid or collage look to this gallery. 8:34 So we'll go ahead and copy these and paste them a few times so that we can apply 8:39 this to pretty much every image in our gallery. 8:45 And first, we'll go ahead and just change these selectors. 8:50 So I'll select the 2nd and 6th child, the 3rd and 7th child, and the 4th and 8th child. 8:52 Then we'll just go ahead and adjust these rotations a little bit 9:05 so it looks more random. 9:09 So for the 1st one we'll say negative 2 degrees. 9:11 This one we'll say positive 1 degree, and this one we'll say something like 9:14 positive 3 degrees. 9:18 So we'll go ahead and save that and we can switch back to Google Chrome 9:21 and refresh the page, and as you can see, we have sort of a more 9:25 random looking image gallery. 9:29 Creating an image gallery is a lot like creating horizontal navigation. 9:32 You simply float all of the elements and then let them flow around each other. 9:37 [Think Vitamin Membership][membership.thinkvitamin.com] 9:41
You need to sign up for Treehouse in order to download course files.Sign up