11.5 A gallery stub - Video Tutorials & Practice Problems

<v Michael>Now that we've got</v> this three column layout set up, we're going to actually put it to use and have a stub version of the gallery, so this will give a preview of the full photo gallery that we'll be developing in Learn Enough JavaScript to Be Dangerous, but this will give us a chance to see how these three columns work with some actual images. <v Lee>And why we set it up like this.</v> <v Michael>Yeah, it'll give us a chance</v> to just explain why these rules are useful. So we're gonna start by actually downloading some images and they're on the learnenough cdn, it's a zip file so here it is, (soft keyboard clicks) gallery.zip, here it is in our project directory. And so now I'm gonna unzip it using the unzip command and move it into the images directory at the same time with the -d flag, you can find out about this by typing man unzip if you want. (soft keyboard clicks) And then we can remove it, we don't need it anymore. And I'd like to do rm -f in these cases when I know that I really wanna get rid of it. And then we can take a look here at the images. So we've got a couple of slides, we have a large slide here, this is an image of some flowers. <v Lee>It's an orchid at my house.</v> <v Michael>Oh nice.</v> <v Lee>I took that and everyone will be happy to know</v> that after a year that orchid is still alive and just recently bloomed. <v Michael>Oh, that's great.</v> It hasn't? Let me, that makes me happy. All right and so here's a small version. <v Lee>These have been orchid updates.</v> <v Michael>All right, it's really,</v> you should have a Twitter account where you just tweet (Lee laughing) called Lee's orchid updates, at Lee's orchid updates. All right, so we've got two of them, just one one large one and one small one and we'll show what we're gonna do with those in a moment. Let's include these images onto our layout, it's gonna be here in the gallery and it looks like we're gonna add quite a bit of extra structure, Lee, what's some of the motivation behind this? <v Lee>Right, here's a lot of extra structure here</v> because we're intending for this to be set up for the Learn Enough JavaScript to Be Dangerous. So some of these elements are gonna need extra wrappers to hold content for JavaScript to be able to manipulate. So what we're gonna do is we're gonna add our small image on the left side column, in the col-nav and we're gonna wrap each one in a div. And one of those divs, we're gonna give the class of current too. <v Michael>Okay, yeah, this is the kind of thing</v> if you want to copy and paste from the text, that's probably fine. And these are thumbs. <v ->And then we're also</v> gonna add a new class to this so this is gonna be gallery thumbs, and that's where we're gonna target the gallery specific thumbnail styling and you'll see what I mean by that when we do this. <v Michael>Okay and there's an ID,</v> this is gonna be for JavaScript, right, later on. <v Lee>Right, so we're not gonna target styles</v> at that ID, we're just setting this up so that in the JavaScript tutorial, we don't have to do a bunch of CSS and HTML, right. <v Michael>So this will be the current image</v> and we can just put it in here, and we should have an alt here as well. <v Lee>We should.</v> <v Michael>Say image title 1,</v> this is kind of a placeholder in our real application, we'll have descriptive titles and more descriptive file names as well. <v Lee>Right.</v> <v Michael>Okay and then,</v> so that's the current image and then I guess this is gonna be the actual gallery, will just be a different image <v ->Right.</v> <v ->For this one here, right,</v> but for right now, we're just gonna use the same one. Wanna say like image title 2. <v ->Sure.</v> <v ->Just to emphasize that this is a stub</v> but in real life, it will be a different image, okay. <v Lee>And that's a good idea.</v> <v Michael>Okay, then we've got our content here</v> and we're gonna put the bigger image and wrapped in some divs, like at least one div. Yeah so there's a, it's a gallery photo. Will this work if I do, I bet it can't do two but if it can, that would be really cool, I'm gonna do a tab trigger here and see if it creates them. <v Both>No.</v> <v Lee>And so the reason why we're adding</v> this div wrapper around the main image is that when we use JavaScript to swap the images, we are gonna want to have multiple actual image files in this section at the same time, and this will allow us to control that a little more easily. <v Michael>Okay, so this is now the same image</v> except just in the large directory. <v Lee>And we could do that just on the column</v> but then if we wanted to have any content below the image then that could screw everything up, so this way everything gets its own little JavaScript target. <v Michael>Okay and then in the final column,</v> in the aside, we'll have the image title and the description, this in h3. (soft keyboard clicks) And we want a couple more classes, is that right? Or to class them in ID? <v Lee>Exactly.</v> (soft keyboard clicks) <v Michael>All right, so this is plenty of classes</v> and IDs for styling, and we are gonna add a lot of styles but let's take a look at it, huh? <v Lee>Yeah.</v> <v Michael>All right, well, it's appearing.</v> (Both laughing) I mean, okay, have to admit it's not ideal, but it's there. (Lee chuckles) All right, well, let's go over to our CSS and this is just a bunch of stuff, right? <v Lee>Mhm.</v> <v Michael>Where does it go, do we have gallery styles?</v> We don't, we want to add in some gallery styles. <v Lee>That is correct,</v> we needed a whole new gallery section and I'd put this at the very bottom, 'cause this is a totally new whole portion of the site and these are gonna be particular just to this gallery page. <v Michael>Okay so the more specific ones wanna go</v> at the bottom. <v ->Yep.</v> <v Michael>All right.</v> <v Lee>Yeah, you might have a bunch</v> of different three column layout pages but you're probably only gonna have one set of styles for a gallery. <v Michael>Okay, well,</v> I'm just gonna start throwing things down, Lee and you can give us a narration about the motivation for them. (Lee laughing) <v Lee>All right, so we're first gonna style</v> the thumbnails. <v Michael>So you're the color commentator here.</v> (Lee chuckles) <v Lee>Yeah, I will be chiming in</v> and explaining why Michael's doing the things that Michael's doing if I can, can't always do that. (Michael laughing) <v Michael>That's true.</v> Okay, we're gonna give a height. <v Lee>So this is setting the height</v> of that column to 90 view height and the reason for that is that we want to have an overflow set for this, so that if we have a whole lot of thumbs, you'll be able to scroll that side of the gallery up and down independently of the other content columns. <v Michael>Okay, so that's over here?</v> <v Lee>Right, so now yep.</v> <v Michael>Oh, it actually works like that.</v> <v Lee>So yeah, so you can scroll up and down,</v> so if you imagine there's a whole bunch of images in there that you'd be able to click on, then it would work like a menu system or a menu bar. So then next, we're gonna change the divs that are in there so that we give them a rollover state so that people know that they're clickable, and this is one of those things that might sound weird because you're used to just links being clickable, but theoretically, anything on a page can be clickable when you're using JavaScript. So what we're gonna change here is we're gonna change the cursor action which is a CSS style that we haven't used before. <v Michael>Yeah, I haven't seen this.</v> <v Lee>And we're gonna have it work like a link.</v> <v ->So when you roll over-</v> <v ->All right, so right now</v> if I move my mouse over, it stays the regular little arrow. <v Lee>And now when you refresh after saving,</v> it'll look like it's a link. <v Michael>Ah, that's good.</v> <v Lee>And then in the next tutorial,</v> we'll add an action there that detects that click, and that actually does something. <v Michael>Got it, okay.</v> <v Lee>Then we're gonna style the images</v> that are in the thumb column. And this is gonna have a whole bunch of stuff including our old favorite box sizing border box, and this is just so that everything gets contained inside. <v Michael>Okay, we're gonna have a box shadow.</v> There must be good resources, I think we may have mentioned them before, right? <v Lee>Mhm.</v> <v Michael>On box shadow 'cause I'm still not,</v> I don't remember what the 0005px does. <v Lee>So what we're adding there is a box shadow</v> that is gonna be five pixels in width and it's gonna have sharp edges and it's not gonna be moved left or right, and it's not gonna be moved up or down so it's gonna be centered right around it. So it's going to work like a border but because box shadow doesn't affect page layout, we'll be able to have the box shadow show up and not affect the other elements on the page, I know that sounds weird but it's transparent, so you can't see it, it's hidden. <v Michael>Oh, okay, so why is it there?</v> <v Lee>You'll see.</v> <v Michael>Oh, it's true, there are more rules there.</v> <v Lee>It is, there are more rules.</v> So we're gonna make these things inline blocks so we can give them some extra styles. <v Michael>Right.</v> <v Lee>We're gonna make the margin bottom 10 pixels</v> so that pushes them away from other ones. <v Michael>Right.</v> <v Lee>And we're gonna make the opacity 50% here</v> so that they look a little washed out. <v Michael>Okay and let's take a look this one, oh yeah.</v> <v Lee>We're going add a totally new CSS style</v> called transition and this is an animation CSS style. <v Michael>Wow, that's pretty cool.</v> <v Lee>So we're not really gonna dive deep</v> into this right here because it's a little more complicated, but what we're setting it to in this compound expression is animate all potential CSS things that are part of this element, the amount of time we want the animation to last and the type of animation. So ease-in-out, it goes a little slower at the beginning and a little slower at the end, so that it has like a nice transition to it. <v Michael>Yeah.</v> <v Lee>And that will look at,</v> because we set it to all, that'll look at any changes that are made to the CSS so if we change the opacity to one then it'll animate that opacity change. You could just change the all to opacity and then you can make a whole bunch of CSS changes and only the opacity will animate, but all is easy for what we're doing 'cause we're not doing very much with these. And then the last thing we're gonna do is we're gonna set the width to 100% so that they fill the space of this column. <v Michael>Why didn't, that didn't do</v> what I expected to do. <v Lee>Refresh.</v> <v Michael>No, I feel like I'm missing something.</v> <v Lee>Go back.</v> <v Michael>All right, we see</v> that this is getting all squished down here and Lee can you explain why that's happening? <v Lee>Right so our main gallery photo</v> is breaking the layout so we need to resize that one too, so that we can see our changes on the thumbnails. <v Michael>Okay, so we can do that here,</v> the gallery photo, look here, it's this one here, gallery photo and then. <v Lee>We'll target the image that's inside.</v> <v Michael>Yeah, the image inside</v> and then we just need to give it a width, right? <v Lee>Correct.</v> <v Michael>And it's gonna be a hundred percent</v> of it's parent. <v Lee>And it's parent changes sizes too</v> so when say this in refresh, it's gonna all snap into place. <v Michael>Oh, look at that, that's a lot better.</v> <v Lee>Now we can actually see the thumbnails.</v> <v Michael>Yeah, that's good.</v> And we wanna have some sort of hover effect on these, right? <v Lee>Right, so let's add in a hover on the image</v> and this will be to set the opacity to one, so that when you hover on it, it's the full, clear image, not this washed out one. <v Michael>All right.</v> <v Lee>And then we also want to add</v> in a little border around the current one so that you know which one you're looking at, and also to make that one a hundred percent opacity so that you can see it. (soft keyboard clicks) <v Michael>And this is just an orange color you picked</v> with the color picker? <v Lee>Right, that's right.</v> <v Michael>Okay.</v> <v Lee>The pixels on the box shadow got messed up.</v> <v Michael>Don't look at that.</v> <v ->And so the reason why we.</v> <v ->So it's 5 pixels there.</v> <v Lee>Yeah, why we reason why we had</v> to add the box shadow with a transparent color in the top is so that the animation will notice that when we animate these or when we do swapping with JavaScript. So the way that that animation works, it needs a style that is originally set and it needs a new style. So I know that sounds complicated but when you see this in JavaScript, you'll understand. <v Michael>Okay, so this is good though,</v> this is the transition that happening? <v Lee>Mhm, that's the transitioning, yep.</v> <v Michael>And that's because on hover</v> it's changing the opacity here. <v Lee>Right.</v> <v Michael>And so that this, because of all,</v> if it's at opacity, it would work the same. <v Lee>Right.</v> <v Michael>But this way,</v> we had other things to change. <v Lee>Yeah, we can do this</v> but if you want to copy and paste the box shadow into the hover state, yeah, the box shadow from current into hover then we could see how that looks too. <v Michael>Oh, right so this will animate that.</v> <v Lee>Yeah.</v> <v Michael>Yeah, that kind of fades in, here we go.</v> <v Lee>Cool, yeah.</v> <v Michael>Right, and then we've got gallery photo here,</v> this image, but there's some other ones too, we'll see what we've gotten here. <v Lee>Yeah, on the wrapper</v> we're gonna add a position relative and reason for that is that when we animate this with JavaScript, what we're gonna be doing is swapping in another image that's gonna be absolutely positioned. And that way we can have like a cool transition effect so that when you click one image will cross fade into the other, which it's not gonna look like anything right now, but, it will look cool. <v Michael>All right, so that's just future proving it.</v> <v Lee>Exactly and then on the right hand side</v> just some font changes, (soft keyboard clicks) just make this a different size here, a little smaller, we saw the Flexbox there, right? It just expanded. (soft keyboard clicks) Okay, just a little bit of polish, exactly. All right, so the final version of the gallery once we've added all the JavaScript, we'll have different images here in the thumbnails, all the way down, we'll be able to click and it will cross fade the big version of the image and it will change these, is that right? <v Lee>That's right.</v> <v Michael>Okay so this is just a good foundation</v> but we can see now how to use our gallery. Oh and I just clicked on the homepage, I noticed, oh no. (Lee chuckles) What has happened here? <v Lee>Yeah, things are not looking good here</v> and this is due to the fact that we changed our content container to be display flex, so all of a sudden, every div that's inside it is trying to flex. <v Michael>Oh, I see. Yeah, this is this line here.</v> Now there's a simple way to fix this, isn't there? <v Lee>Yeah, we can just wrap everything in a div.</v> <v Michael>Okay, but we could do this in CSS, right,</v> if we wanted to use Flexbox. <v Lee>Right.</v> <v Michael>We could like basically stack these</v> on top of each other, what's that, a flex direction? <v Lee>Yes, that's correct.</v> <v Michael>But that's not necessary in this case, right</v> 'cause we can just. <v Lee>Right, if we just put our home</v> in a div called home. <v ->Whole thing.</v> <v Lee>Which is actually kind of a nice idea,</v> you know, so that if we ever want to target styles at everything that's on a homepage, you know, there it is, all these different sections are under one class now. <v Michael>Got it.</v> All right, let's refresh it and see what happens, all right. Now I'm not entirely clear on why this extra div worked. <v Lee>Okay, so what happens</v> when the Flexbox is invoked is that the elements try and do what like the default settings are, so when there's multiple child elements, what's happening is they're trying to be flexed on the page. So because it's going horizontal, they're doing, if you bring up the Flexbox diagram, they're doing that thing where they're all crammed together on the left. <v Michael>Yeah like here.</v> <v Lee>So that's what's happening so.</v> <v Michael>Ah, but, so how is it</v> that adding an a div keeps that from happening? <v Lee>Because when there's only one there,</v> it just takes up the whole space. <v Michael>Oh, so we're basically saying,</v> look, there's only one item inside this, I got it. So here, this is the container and so we're saying, look, there's only one div, and so instead of 1, 2, 3, it's just this. <v Lee>Right, when there's only one,</v> Flex doesn't have to share anything so it just treats it as something that fills the whole space. <v ->Got it.</v> <v ->Yeah. (laughs)</v> <v Michael>All right, that makes sense.</v> <v Lee>It's confusing, but a simple solution.</v> <v Michael>Yeah, that's good.</v> All right, well, look at this. We have made a huge amount of progress, we've got our homepage looking pretty good. Maybe a little bit catlike but other than that, it's great. (Lee laughs) We've got our nav links and we've got a nice stub here for a gallery that we'll be able to work with later on in the next tutorial, in the sequence. All right, let's make a commit and push it up to GitHub pages, (soft keyboard clicks) add some style with Flexbox (soft keyboard clicks) and just wait a minute or two and it should be good to go on the server. And there we go, got gallery here, looks like it's working. <v Lee>Looks good.</v>