0:00
Hey guys, welcome to another video of easy tutorials and today in this video I will show
0:05
you how you can create an image gallery. As you can see we have an awesome image gallery here with light walks and forward and backward
0:14
arrow and a cross button to close this light walks. And we have a beautiful hover effect on images. Okay
0:23
So please subscribe my channel easy tutorials to watch more videos like this
0:30
So without wasting any time, let's start creating this image gallery. Okay
0:35
So first of all, I have a folder here. Okay. Inside we have images folder
0:42
As you can see, we have two types of images here. One is for thumbnail, that is a small image and another one is full size image. Okay
0:52
So total I have 20 images here. And now I'm creating two other folders, CSS and JS. Okay
1:04
Now let's create a HTML file. So here I'm writing a HTML code
1:36
I will write a message here image gallery design. And I will save this file as index dot HTML. Okay
1:50
Let's see our web page. It's good. And now I will create another file that is CSS file
2:01
I will write CSS code for body
2:27
I will change the alignment color and margin. Now save this file as a style dot CSS. Okay
2:43
And now I will link this CSS to HTML file
3:02
I will give the CSS file path. Done. Let's see our web page
3:18
Now we'll create a div gallery. Okay. And inside this div, I will add images
3:27
So let's see our image file name. Okay. I have images, pic1.jpg and pic1.small.jpg
3:35
So I will use this small picture for thumbnail. Okay. So I will write the full image file name with path
3:47
Let's see our web page. We have one images like this. I will add more images
3:53
I will add 10 images here
4:10
Okay 10 images added there. And now I will replace the file name
4:17
Like I have pic2.small.jpg, pic3.small.jpg
4:29
Like this, I will change all the images file name
4:44
Okay, now it's done. Now I will write the CSS code for images
4:52
First I will write code for gallery. I will add margin here. Done
5:02
And now I will write code for image. I will set the width and padding
5:14
Okay, now see the padding is there
5:27
Now I will add a filter here. Gray scale 100%
5:36
Now you can see the gray effect here. Okay. I will set the transition
5:45
One second. And again gallery image hover. Then you will hover on image. Okay
6:03
Now you can see the color when you hover it. And now I will add a scale
6:13
Okay 1.1. Now it is very good hover effect on image. Okay
6:24
Now I will link the image to its original image file. Okay
6:30
With a large image file. So this was our image thumbnail and I will link this image thumbnail to this image file
6:39
that is large image file. So here I will link this with a tag
6:46
I will give the file name that is pic1 pic2. Okay. So I will link first thumbnail with pic1.jpg
7:01
Now it's done. Let's click on first image. It is opening in browser. Okay
7:09
Like this, I will add this file name to all images thumbnail
7:31
I have to change the file name
7:57
Now I will add a lightbox here
8:11
For that search lightbox jquery on Google. And this is the website. Okay
8:18
Download this file. Now open this file, extract it. Okay
8:32
Inside this folder, you will find dist and there is a folder called CSS
8:41
So copy this file lightbox main.css. Okay. And paste it into your CSS folder. Done
8:53
Again move to that downloaded folder and there is a JS folder and inside that you will find
9:00
lightbox plus jquery main.js. Okay. Copy this and paste it into your JS folder. Done
9:10
Now I will link these two files to HTML page. So first I am linking the CSS file lightbox main.css and now I will link the JavaScript. Okay. Done
9:49
And now I will add here data lightbox is equal to my gallery
9:59
You can write your own name gallery1 gallery2 anything. Okay. Let's save it and check your website
10:07
Now click on any thumbnail and now you can see image in a lightbox. Okay
10:13
This is your first image. Like this I will add this lightbox for all images. Okay
10:46
Now click on any image you can see there is a lightbox
10:50
But now I have to add a forward and backward arrow and a cross button. Okay
11:01
For that go to your downloaded file and images. Here you will find four images
11:11
Copy this and paste it into your images folder. Done. Now refresh your web page
11:23
Now you can see a cross button here and a forward and backward arrow
11:31
There is an image count also. Okay. Five of ten. And now I will add image caption or image title for that right data title and your image
11:44
title here. This is cat. Okay. Like this you can add title on all images
11:53
See the title is here. Okay. So like this you can create a image gallery easily using HTML, CSS and JavaScript
12:10
If you have any query or you want this code then write it in the comment section and please
12:15
like this video and subscribe my channel. Thank you
