Hover over these images we can see we have this animation and when we click on the next image we can see that the image changes in the larger view and we also have the description changing over here.
So each of these images have different descriptions of their own and it will be displayed over here so this is what we are going to design in this video so let's get started as always we'll start.
By writing our code in vs code so I have this empty project opened called gallery and I also have this folder called images where we have these images which we'll be using in our gallery or a let's.
Start by creating our index dot HTML file and I will also create a style dot CSS file and we also need to write a little bit of JavaScript so we'll create a JavaScript file alright so let's start.
File so we'll type link and press tab then we'll type style door CSS over here and we'll also link our script file so I'll type script SRC main dot J s now let me just maximize this window so that.
We can see our code clearly so first of all you'll create a division with a class of gallery container and in that we'll have a heading and we'll also give it a class of gallery heading and I will.
Just type some heading over here and then we'll have a division for the active image so we'll create a division with the class of active image and in that we'll have an image and.
Initially we will be displaying the first image so we'll just stop images / 1 dot jpg and then we also need a division for the caption so we'll create a division with the class of active.
Caption and we just add some lorem ipsum well that's it with the active image now let's create a division to contain all the images in our gallery so we'll create a division with the class of.
Posts Related:
Gallery images and in that we'll have a
Division with the class of gallery image and in that we'll have the image and the caption for the first gallery image will have the first image from our images.Folder so will you stop IMG and for the sources we'll grab images / 1 dot jpg and then we will add a caption so just copy this from here and we'll paste it right here and we just named the class.
Image caption instead of active caption now to identify the different captions we'll just name the first caption image 1 and I will also copy this and paste it over here now I'll just copy this.
Gallery image Division 4 more times and I will just change the images to two and we'll also change the caption and we'll change this to three and the caption or agui are done with our HTML now let's go.
To our CSS and start styling this page before that let's open this with live server first of all we'll set a maximum width of 700 for the gallery container and I will also give a margin of 16.
Pixels top and bottom and 0 for left and right now let's style the active image so we'll just type active image and we'll give it a height of 400 pixels and I will also give it a margin bottom of 8.
Pixels now let's style the images inside the active image so for the images we'll give it a width of 100% of the parent and a height of 100 percent of the parent and we'll also.
Set the object fit to cover so that the image won't be distorted or a novel style the active caption so I'll just type active image active caption and we'll set the position to absolute and.
We also need to set the position of the parent to relative so that it can position itself relative to the parent so for the active image we'll set the position as relative and I will set the.
Bottom as zero and we'll also give a
Background color of black and a width of 100% and I will also give it a padding of 24 pixels and the color of the text to light gray now we can see that we.Have a little bit of extra width over here that's because of the padding that we have over here so if I just comment this we can see that we have the correct width so if you want to include the.
Padding in the width as well then you have to set the box sizing of the element as border box so we'll type box sizing border box so now we have the correct width will also change the font.
To Roboto now style the gallery images so we'll tap gallery images and for the gallery images we will set the display to flex and then for the gallery image which is.
Inside the gallery images we will set the width to 200 pixels we will also set the height of the gallery images to 100 pixels and novel style the images inside the gallery image so we'll tap gallery.
Image IMG and we'll set the height as 100% and the width as 100% of the container and we'll also say the object to cover so that we have the correct proportions for the image and we also.
Set the cursor to pointer so that when we hover over these we have a different icon now we don't want to display the captions of the images over here in the gallery images we want to show them only.
In our active image so we'll just type gallery image image caption and we'll set the display to none now we need to have a little animation when we hover over these images so for that we will.
Type Gary image colon hover and when we hover over the gallery image we want to have the animation happen to the image so I'll type IMG over here and we'll scale up the image a little so we just.
Type transform scale and we'll set the scale to 1.2 and now when we're all over this we have this animation but we also need to make some changes over here in the.
Gallery image we will set the overflow to hidden so that everything outside it won't be shown and we'll also add a transition over here in the IMG and we'll say the transition of 400.
Milliseconds so that will have this smooth animation alright that's pretty much it with the styling now let's go to our main dot J's file and let's add some code so that whenever we click on any of.
These images it will be displayed over here and also the caption of the image will be displayed over here so first of all we need to reference some things from our HTML so we'll have Const.
Gallery images and we'll have document dot query selector all and we'll tap gallery image so this will select all the gallery images next we need to have the active image so de AB Const active.
Image and we set it to document dot query selector active image and then we also need the active caption now we need to add event listeners to all the gallery images so that when we.
Click on any of the images we want to add that image to the active image and we also want to add the caption of that image to the active caption so we'll use a for each loop for that so we'll type.
Gallery images dot for each and then here we have to create a callback function so we have to name the argument so we can name it anything we'll just name it I and we'll create an arrow.
Function over here now this I will represent each of the gallery image let me just change this to image so that it'll be more descriptive or as so for each of the images we need to add event.
Listeners so we'll type image and dot add event listener for the click event and we'll create a function over here so whenever any of the images are clicked we want to get the source of the image.
And the caption of the image so let's create a variable called image source and I will set it equal to image dot query selector and here we will search for IMG dot get attribute and we'll get.
The attribute called SRC where the source of the image is stored and then we also need the image caption soul type let image caption equals image dot query selector and we will type image caption.
And we'll get the HTML inside that so we'll type in our HTML so now we have the image source and the image caption now the only thing we need to do is add these to the active image and the active.
Caption so we'll type active image dot set attribute and we want to set the SRC attribute and we'll set the SRC attribute to the image source and then we'll set the inner HTML of the active.
Caption so we'll time active caption dot inner HTML equals image caption all right that's it with the JavaScript now let's check whether it works so let's click on the second image and we can see.
That the caption is changing but the image is not so let's see what mistake we have made and for the active image we are selecting the active image division so.
If you go to the HTML we can see that this is the active image division and in that we have the IMG so we have to set the SRC of the IMG not the division so here instead of active image we have to.
Type active image IMG so this will select the IMG inside the active image and then we can set the source over here so now let's check whether it works so we can see that the second image is.
Being displayed and we also have the caption the third image fourth and the fifth all images are working alright so our gallery is working alright now let's copy this to our blogger website Here I.
Am in the dashboard of my blogger website so let's go to the theme and click on edit HTML and let's copy our JavaScript and I will paste it just before the body ends so right here we.