Problem Solving

[?music?] 0:00 [Problem Solving] 0:02 [Nick Pettit] So what we've created so far works just fine. 0:05 We could go ahead and stop right here and say that we're done. 0:09 We can click on these photos and they enlarge, 0:13 and everything looks great. 0:16 But there's several problems with what we've created. 0:18 First of all, all of these photos are absolutely positioned, 0:22 so it's really difficult to go ahead and add additional photos. 0:26 Here you can see each one of these photos is absolutely positioned 0:31 and if we were to go into these images and say, copy and paste 0:35 and make a new image, we would have to actually go back into our CSS 0:41 and set additional coordinates for the new image. 0:46 That's really not a good way to work, 0:51 especially if this gallery were being generated dynamically from the server 0:55 or from a database. 0:59 So let's go ahead and see what we can do to tackle this problem. 1:01 Sometimes when you're developing websites, 1:05 it's best to just go with the simplest thing that could possibly work 1:08 and then iterate on that. 1:11 What we have so far is pretty basic and simple, 1:13 but there's a lot of things that we could improve. 1:16 So here's our plan of action. 1:20 The first thing we're going to do is add floating placeholders around each one of our images. 1:22 We're going to absolute-position the photos inside of these placeholders. 1:27 jQuery will be used for interaction, 1:32 and then we'll use CSS3 transitions for all of the animation. 1:36 So first, let's go ahead and modify our HTML markup 1:40 and add in the placeholders for the images. 1:44 So first, we'll go ahead and change this div 1:49 to be an unordered list and we'll scroll down 1:57 and change the closing tag there. 2:00 Each one of these images we'll wrap in a list item tag 2:05 with the class="placeholder". 2:09 So we'll go ahead and copy and paste that-- 2:12 paste it there. 2:18 We also need a closing tag for our list item, 2:21 so we'll go ahead and copy those together 2:26 and we'll put one of them between each one of our images. 2:29 So we have a few more here, 2:34 and for our last one, 2:48 we don't need the opening tag so we'll go ahead and just get rid of that. 2:50 We just need our closing tag. 2:54 And then, we'll go ahead and indent all of our images 2:56 so that this code is a little bit more readable-- 2:59 do our last one there. 3:03 That's all we need to do to modify our HTML, 3:09 so let's go ahead and switch over to our CSS 3:11 because there's quite a bit more modification we need to do here. 3:15 So first, in our #stage here, we'll go ahead and remove the margin 3:23 because we don't need it anymore. 3:29 We'll remove the explicit height 3:31 because that's another thing that's wrong with what we currently have. 3:35 And finally, we'll go ahead and say list-style: none 3:38 because remember, this is now an unordered list. 3:44 Next, we need to change the selector on our transitions 3:48 because our images are now wrapped inside of the .placeholder classes, 3:53 so we'll add that in. 4:01 And then, we need to go ahead and select our placeholders, 4:06 so we'll say #stage :placeholder { 4:10 and we'll float them to the left, 4:15 we'll give them a width: 210px; 4:17 a height of 160px; 4:20 and a margin all the way around of 12px. 4:24 Now, we want to change all of our photos from using ids 4:29 over to using a photo class, 4:33 so we can actually just remove these ids that we created originally. 4:36 So we'll go through each one here and remove the ids. 4:44 Just a few more here-- 4:54 and there's the last one. 4:57 And now, in our CSS, we can keep our photo classes 5:00 but we can go ahead and remove all of this absolute positioning. 5:05 So we'll remove that, 5:10 and now we can remove position: absolute just like that. 5:13 So we'll go ahead and switch over to the browser and refresh, 5:18 and now you can see our page looks a little bit different 5:23 and the animation no longer works, 5:29 so let's go ahead and switch over to TextMate. 5:31 The reason that this is happening 5:34 is on our large_photo class, 5:36 we're using position: absolute; 5:40 so when we switch classes from photo to large_photo, 5:45 we're actually changing over to position: absolute; 5:49 and when you changing positioning like that, 5:52 you actually break CSS3 transitions, 5:55 so that means we need to add in some jQuery to kind of bind everything together. 5:58