Today we're gonna take a look at creating a light box image which, essentially, if you're not familiar with the idea, is when you click on an image inside of a website and actually brings up a preview of that image for you, and you can click anywhere else, and it'll close out of that preview.

This idea was brought up on my discord server, so if you're not already a part of that, make sure you join in the link in the description down below.

Welcome back, toe webbed, A simplified My name's Kyle, and my job is to simplify the Web for you.

So if that sounds interesting, make sure to subscribe to the channel and you'll get plenty more videos just like this one.

So to get started, I'm just gonna show a quick demo of what the application is going to do.

And this is the finished version on the right Here, you can see we have a grid of nine different images, even the one that's hidden behind me.

And when I click on any of these different images, it's going to pop up a larger version.

That image with a nice border dark and everything else.

And then when we click outside that image, it's going to close it for us.

And this is the idea of that light box effect that I talked about earlier.

So to get started with us, we're gonna need to create HTML, CSS and JavaScript to get everything working.

And the easiest place to get started is almost always the HTML.

So we'll create a file called index dot html.

And if we click exclamation point plus center, that's going to generate the boilerplate HTML code for us.

And we could just come in here, use light boxes or title.

And now we have some HTML that we can render toe our application.

And if we just right click here, click open with Live server.

This is a visual studio code extension, which you should install if you don't already have.

So we can click that and it will essentially just open this application up and you can see we just have a blank page right now.

Since we don't have any HTML now to get started, we're gonna put these images here inside of a grid.

So over here, what's create a do with the class of grid just so we can style that in CSS.

Later on, we're gonna put all over images inside of here.

We're going to use an image tag and then a source toe where we want our image to come from.

And there's a website called unspool ash, which will allow you to essentially put in place holder images inside your application really easily.

So we just type in https colon, backslash, backslash, just like this source dot unspool ash dot com dot com slash And then we put whatever size we want.

So far, case we're going to have 400 by 400 image just like that.

And then afterwards here, we can put some kind of query if we want.

In our case, we want this to be a mountain.

Now, if we close that off safe and go over here, you can see we have a 400 by 400 mountain showing up instead of her application, and we're gonna actually do this nine different times.

So we have 123456789 And we're gonna change these to be different properties because right now, if we save this you see, we're gonna get a bunch of the same image.

So we're just gonna change our search.

You here to be a bunch of different nature related things.

So we're gonna have, like, a valley, for example.

Maybe a beach right here.

We got the ocean.

Let's do water, maybe trees a week and lastly come down here and we can just do Cliff.

Now, if we say that we should have a bunch of unique images which are all kind of related around this nature theme and they're all showing up down here, which is perfect for us.

And every time we refresh our page, it's going to give us different images based on these search terms, which is perfect for our use case.

Now that's going to be all of the HTML that we need to create this effect.

So now it's great to Morse Sheets.

We're gonna have a style sheet which is called Stiles Nazi SS, and we're gonna have javascript which rejection call script out Js.

And before we get started, any of those what's actually include them in our application.

So first we're gonna include a link which is going to our styles dot CSS and we also want to include a script tag and the script tag is going to have here the differ attributes.

This will just make it so it loads and runs after application.

HTML is loaded.

This is just so that we don't have to worry about waiting till our document is done being ready and we don't have to include at the bottom of the body.

It just makes everything easier.

And then we're also gonna put our source as our script dot Js Now are JavaScript and style sheet are both being loaded into our application on we can jump into what our styles are gonna look like for application.

The first thing that I want to start with is actually styling the grid for images so we can select that by just saying dot grid, This is going to be our great class.

We're gonna use display grid in order to set this up.

And if you're not familiar with CSS grid, I have an entire video covering CSS grid which you can check out, and the card's linked above or in the description down below.

So continuing on, we're gonna put some grid template columns in here.

This is how we define our columns.

And we just want to say we want to repeat the same column three times.

We want that column to be 200 pixels wide.

Now, if we say that immediately you see, we're gonna get these 200 pixel wide columns This one's 200 pixels, this much 200 pixels, and this one looks like it's larger, but it just overflows our grid, which is fine for now.

Next, we want to make sure you just to fire content in the center.

This is going to Linus in the centre horizontally, and we want to do the same thing with our content center here for a binding our content, this is gonna be for a vertical alignment.

We want a small gap between our pictures.

So we're gonna say maybe 10 pixels, for example.

And lastly, in order to make it so we perfectly are centered in our screen, we're gonna make our grid the height of the entire view height 100%.

And we're gonna go up to her body.

We're gonna remove all the margins.

This is just going to get rid of the small gap you see here.

Now, if we say that, you can see that everything is lined in the centre.

We still have a gap over here, and that's just because our images are overflowing all the way over under the side, which we do not want.

So in order to get rid of that, we're gonna select all of the images instead of our grid and make sure that they are a width of 200 pixels and a height here of 200 pixels.

This will fall into our grid template column size.

Now, if we say that, you see, we get that same exact grid that we have over in this example over here.

Now, before we get too far into the rest of our CSS, we actually to set up our light box element, which is going to be the element that shows up here when we click on an image, this entire black background plus the image.

So in order to set that up, we're gonna actually do that in Java script instead of HTML.

It'll just make it work on any page.

We include the script.

So to do that, we're just gonna create an element.

We're gonna call it White Box.

We just use document got creep element.

This is going to create an element for us of the type Div.

And then we can come in here and say that the i d for a light box is going to be a light box.

This will just make it so we can select this element easily inside of our CSS.

Once we have that done, we can just depend this to the end of our body So we can say we want document dot body.

I got a pen child.

We can upend our light box onto the end of our child right now You're gonna notice nothing is actually happen.

Are light box is not going to be there, but we can actually style or a white box.

It's just nothing right now it's an empty def, so it won't show up.

But if we apply some styles to it will build to see what it looks like.

We want to style it so it looks essentially just like this.

So the first thing we need to do in order to do that it's come down here, select our light box and when we select our light box, we want it to be displayed always in the very center of our screen like this, So we can use is we can use position of fixed.

This is going to make it so it's always going to follow us no matter where we are on the page.

No matter how far we scrolled it down or up, it's just going to follow us.

Next thing we can do is you wanted to always be on the top, so we're going to give it a really large Izzy index.

So it'll be above everything else, no matter what.

Also, we want to set here the top to be zero.

We want to set a width of 100% and a height of 100%.

Essentially, what this is going to do is going to make it Phil and stretch over the entirety of our screen.

And we can actually see this by making the background color here equal to a background color of our G B A.

We're just gonna do 000 This is completely black with 80% transparency or a pasty.

I mean, so now when we say that we come over here, you see our light boxes now covering everything inside of her application This giant black area.

If we get rid of our with, for example, you'll see it's gone because now it's zero with Let's put that back in and by default, we don't want this light box to show up.

So we're actually going to give this light box here a display lips of none.

This just means that by default our box is completely gone and it's not going to show up.

But we do want our light box to show if it has the class of active.

So when we have the class of active applied to our light box, we wanted to show up.

And to do that, we're gonna use display of flex.

We want to make sure that everything inside of this light box is always dead center.

So we're gonna do make sure we have here are justified content in the center and our line items in the center.

And now when we have an active lightbox, whatever we put in it in our case, this image will be dead center inside of that white box, which is in the center of our screen always.

Now, with this out of the way, we can move on to finishing the rest of our JavaScript.

So inside of our JavaScript, we want to be able to select all over images so we can do that really easily.

But using document that query selector all, we just want to get all of the images so we can just say I am G.

This will get every single image tag on our entire page.

For your case, you may want to use a different selector because you may not want all images to do this, but in our case, every image will work perfectly for this.

Next.

We want to look through all of our images so we can just say images for each and we want to do this for each image that we have.

We want to run this function and inside of here we essentially want to set up our click event listeners So we could just say image dot ad event listener.

And we want to add a click event listener.

And every time we click, we want to run the code inside of this function, which we want to make sure that our light boxes showing and then we add our image to the light box so we can take our light box class list, and we want to add that active class.

So now every time we click on an image, it should make our lightbox active.

And we can actually just test this real quick by default are active light boxes not showing.

But when we click an image, you can see that now are light boxes being shown up.

So this is working perfectly.

You may also notice that when we hover over an image when we refresh, we're not getting the correct cursor.

So if we go back into our styles on, we just come up here.

We just want to change our cursor here to be pointer.

And if we say that you can see we get this nice point their cursor to know that these air clickable This just makes it easy for the user to know what's going on.

And it still works just fine when we click on that white box back into our script here.

Next thing we need to do is add her image to that light box.

So let's get a new image.

We're gonna call this image, and we're gonna create a new element.

So document dot create element and we want to create an image tag just like this.

And essentially, we just want to set the source of our image equal to our current image source just like this.

So now our new image is essentially exactly the same as our current image.

And what we can do is add that to our light box so we can say Life box, got a pen, child, and we want to upend our image to it just like that.

Now, if we save and we click on an image, for example, we click on this one, you can see our image is now being shown up in there.

But we do have a few problems right now.

When we click outside of it, it doesn't actually disappear.

So let's set up that logic.

Grow quick.

This is actually really easy.

We just want to take our light bucks.

We want to add an event listener for click just like this and inside here.

What we want to do is we want to run this function and all we want to do is just take our light box and we want to get our class list again.

And we just want to remove that active class, which will essentially hide our light box.

So now if I say that, click an image and click away, it's going to hide it.

But there's a few bugs with our code right now.

For example, if we click on another image, you can see both of our images are being shown up.

That's because we're never removing anything from our light box.

Also, if we click on an image, it actually closes our light box because we're not checking to make sure we're only clicking on the black section and not the image section.