7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 CSS3 Fullscreen Image Gallery

In this project we’ll be building on the CSS grid created in the last lesson, using it as a means to play with the :fullscreen pseudo-selector. We’ll use this selector to control the way our gallery appears when it is put into fullscreen mode, ensuring it is suitable to the new screen real estate it has to occupy.

Related Links

4.5 CSS3 Fullscreen Image Gallery

Hey, this is Kezz back with the last of our bonus CSS videos for this course. What we're going to be doing in this video is learning how to work with the fullscreen pseudo selector. So what this is does is it identifies if you've put a certain element into full screen mode using JavaScript. And then, if you have, it allows you to style that element differently when it's in that full screen state. So what you see on screen here is the gallery that we created in the last lesson. In order to properly demonstrate the full screen effect, I have this gallery on the full size of my monitor. Normally I record at 1280 by 720, just so it's a little easier for you to see what's going on. But in this case we're showing the full space. And the way we have this set up is this little button here is gonna target just the gallery alone and it's gonna make that gallery take up the whole page. So you'll see this h1 heading up the top here is not gonna be visible once we go into full screen mode, because it's outside of our gallery element. So I'm gonna hit this button. And there's our full screen gallery. So you might notice there's a couple of little differences here. That heading is gone as I mentioned. We've also changed the number of columns in our grid to make sure that all of our images are gonna fit on the screen. And we've also switched up the amount of spacing that we have in between each of our cells and also around the outside of the grid. So from here to exit full screen mode I can either hit this button again or I can just hit escape. All right, so lets get into the coding. So once again, we have a base pin for you. Most of this is the same as you left the gallery in the last lesson. But we've added a little button here. And I'll just show you. So this button activates this JavaScript. Then this JavaScript looks for an element with the ID gallery. So we've attached that ID up here to the div that we have wrapping around our gallery. And also, you can see inside our button code here, we have both the word Enter and the word Exit. Right now we're hiding the word Exit, but we're gonna set things up so that when we hit this button once and go into full screen mode, instead we hide the word Enter and show the word Exit. So that turns this into a toggle button. Now, I'm just gonna show you what this looks like in full screen mode at the moment, without any of the code that we're gonna add in. So there at the moment, you can see everything's pretty out of whack. You don't have a proper background color showing through. The images are all flush with the edges of the page. They're also a little too close together and you can't see them all. When you're using the JavaScript full screen API, you're only going to to be able to scroll your full screen content if it's the HTML element that you've set to full screen. In this case, we're full screening only our galleries, that means scrolling is not going to work. For that reason we need to rearrange our grid to ensure that all of our content is visible on the screen at once. So to get out of this I'm gong to hit escape, because I can't see the button that's down below these images. All right, so we're gonna scroll down to the bottom of our existing CSS here. We know that the area we wanna style is the gallery, div here with the ID gallery on it and also the class gallery. So we're gonna target that class, And then we're gonna use the pseudo selector full screen. Now this isn't fully supported in all browsers yet, so in order for this to work, you're gonna need to make sure that autoprefixer is switched on. So in the CSS settings, you just wanna make sure that this autoprefixer setting is active. And then if you have a look at the compiled CSS. And scroll down, you can see that we have all the different code here to make sure this works cross browser. So we just go back into our regular CSS. Right, now the first thing that we're gonna fix up is the fact that we just have a black background when we set this div to be fullscreen. What we want this to have the same blue background with the gradient on it. So we're gonna go up to this body before styling here. We're just gonna copy this line of code here that sets the background gradient, and we're gonna paste it in here. All right, now let's give that a test. I'm just gonna zoom back out to show you my full monitor and we'll see the effect. All right, so that's much better. And now you can see that we've got the darker blue at the bottom and we have the lighter blue up top. So we're getting the kind of effect that we want in the background now. So I'm just gonna switch back with escape. All right, next up we're gonna change the number of columns that we're using in our CSS grid so that we can get all of those images feeding onto our fullscreen view. So if you remember from last time, we use the property grid-template-columns. Before we had repeat 3, 1fr, which gave us three equal size columns. Now we're gonna bump that up to four, so that it squashes down each of our images a little bit allowing them all to fit on the screen. All right so let's take a look at that. There, now that's much better, we've got all of our images fitting on this screen and we can actually access our button down the bottom here now. Now I'll switch back out again. Next we're gonna add some padding, Around the outside so that the images aren't sitting flush with the very edges of the screen. We're gonna set this padding to 1.5vw. So that's 1.5% of the viewport width. All right, let's check that out. All right so now we've got much more spacing around the outside which is making this all look a lot more pleasant. But our spacing in between the cells is now inconsistent with the spacing around the outside. So we're gonna update that to fit. Gonna use our grid gap property. And we're gonna set this to match the amount of padding that we're using, so that's 1.5vw. Excellent, so now we've got spacing of the same size in between our cells as we do around the outside. But our button down the bottom here, even though this is a toggle switch, it still says Enter Full Screen Gallery, even when we're already in full screen. So now let's fix that. I'm going to use this same selector, To identify our fullscreen version of our gallery. But then, we're going to target the class that we have wrapped around the word exit. Right now this is set to display none, so were gonna instead put it back to display inline. And now we need to just do the reverse for the word enter. So we're gonna target the class name enter. Which is wrapped around that word inside our button. And we're gonna set that to display none. All right, let's see if that worked. Sure enough, now our button down at the bottom here says Exit Full Screen Gallery instead of Enter Full Screen Gallery. But it's still not quite right because its alignment is out. What we need to do is turn this button into a part of our overall grid. We've got four columns so we need to make sure that our button spans across all four columns. So we'll grab our fullscreen gallery selector again. This time we're gonna target the button class, which is applied to this div that we have wrapping around our button. And we're going to set it to span across four columns by using grid-column and setting it to span 4. All right, cool, so now our button is centered here. We're almost good to go, the only thing we need to fix is there's too large a gap across the bottom of this here. And that's because this button has some default padding on it and we just need to remove that. So to make that happen, all we need to do is go into the style that we just created and set padding to equal 0. So there we go, that's gotten rid of that extra space above it and now our button reads correctly. We have the right number of columns in our grid for our gallery. It fills this screen up quite nicely and we also have some nice even spacing around our grid. And in between each of our cells to give each image some nice breathing room. So this is a technique that can be great for you if you are producing image galleries or you want to create a nice cinematic mode to show off videos. Or if you're creating content that's designed to be viewed from a distance, say for example, on a television. All right, so that wraps up our bonus lessons. I hope you really enjoyed these extra five projects and that you got something out of them. New CSS is always interesting and fun to play with and as soon as we hear about something else that's really awesome and fun to use we'll come back to you with more cool projects to do. So thanks very much for watching and I'll see you in the next one.

Back to the top