How To Create Image Gallery Using HTML, CSS and Javascript | Lightbox Gallery

hey guys what's going on it's clever techie and in this video we're gonna learn how to create an image gallery using HTML CSS and JavaScript this is what our gallery is going to look like we're also going to be implementing a lightbox JavaScript and CSS to do most of the heavy lifting for us so what I've done right now is I've just downloaded a bunch of images and I'm also created a smaller version for every image as well so once you have a big version of a small version for every image we're ready to get started alright so I'm gonna go ahead and create a new project and that beans select HTML name this project image gallery and then I'm gonna navigate to the folder where our images are located and click finish I'm gonna close all the other files here what I need them and it's use image gallery for the title and then we are gonna be using a div tag to place all of our images in it and we're gonna name it gallery and this is gonna be some really basic HTML or we're all we're gonna be doing is using the thumbnails of the images and linking to the bigger versions of those thumbnails so that's all that we're gonna be doing here so I'm gonna say image source equals images and the first image that I have is Africa and that JPEG and then I'm all it's gonna be Africa small which is a small version of the image and then link to it with href images Africa jpg which is a big version of the image I'm gonna close the a tag at the end and all it's doing is using the small image version first and then linking to the big one and here's our small image and if I click on it takes us to the big one okay so I'm gonna do the same thing with the rest of the images and I'm just gonna copy and paste the rest of them because it's gonna be exactly the same code so I'm gonna copy and paste all the rest of the images here and as you can see it's doing it exactly the same thing it's taking a small version and it's linking to the big version of the image let's see what it looks like so far and here all the images and their big versions as well so now let's go ahead and add some CSS I'm gonna create a new file cascading style sheet and they mean style that CSS and then we're gonna add some margin to our gallery div that we've created here to add some space into our gallery so I'm gonna say gallery margin let's use 10 pixels and 50 let's also add some styling to our images as well we're gonna add transition one second padding 15 pixels and width:200px we're also gonna add the rollover effect so gonna say gallery IMG collin hover and this is optional but i like to use a filter grayscale to add an additional effect when the Mouse's are all over the image and we're also going to increase the size a little bit and that's all the CSS that we're gonna be adding now let's go ahead and include the actual CSS file so we wanna use the link HTML tag with an attribute rel equals stylesheet type equals text for our CSS an href equals style that CSS which is the destination of our style all right let's see what it looks like and boom we now have a really cool rollover effect and the images are nicely spaced out so our thumbnails are ready now all we have to do is make the actual dynamic gallery functionality work and for that we're gonna go ahead and use a lightbox so we're gonna go to Google and just type download lightbox and this is a ready to go CSS and JavaScript that we can use in our gallery which is which saves you a ton of time when creating a gallery like this so we're just gonna download it and implement it and we want to extract all the files in a directory where our gallery files are so mine are located under C localhost actually I'm gonna go to NetBeans and find out where the project files are located its pretty long directory names okay so it's here and public HTML so yeah just make sure that you extract the files in the same directory where you have your curing project files I'm gonna click extract and you're gonna have this folder called lightbox to master and the two files that we're gonna be using are located inside of the dist folder so you want to go inside of the disk older and go inside CSS copy this one lightbox min dot CSS also from Jay s folder we're gonna grab lightbox plus J Curie min that J is because we're also going to be using jQuery copy let and let's go ahead and copy both of them in our in our root directory and now let's actually create a CSS folder here and JavaScript folder as well just to keep everything nicely organized so CSS and J s and we're gonna copy both our style CSS that we created earlier and lightbox min that CSS inside of the CSS folder and then this javascript file we want to copy it in the J's folder just to keep things organized now let's go ahead and include those files first of all I want to change the directory of our style CSS to CSS and then we're gonna include white box CSS type it goes text four slash CSS an href equals weii CSS lightbox min that CSS and then include the JavaScript as well script SRC J s lightbox plus JQ remain that yes that's the one we want and then don't forget to close the script tag like this and another thing we're gonna add here is the lightbox attribute called data forward slash lightbox and this is what's actually gonna make everything work my gallery let's just test it out on one of the images so let's go and see what it looks like in a browser and boom it's working now we could also add caption to our images so for that we're going to use a another attribute called data title and let's just say African animals then go back click on the image Oh misspelled the title okay go back refresh and now we have the title African animals so that's working and the last thing we want to do is add the previous and next and the close buttons so for that we want to go ahead and go back inside of our lightbox folder and go inside the dist and then images and here you'll see these four buttons so it's close loading next in previous so when I grab these and we want to paste them inside of our images folder like this and now let's go ahead and also add the attribute to the rest of the images as well and you guys can go ahead and add those data titles yourself that's should be self-explanatory now so I'm just adding all those data light box attributes to the rest of the a tags and now everything should be working so let's go and see what it looks like click on one of the images now you can see that we have an X button we have a close button and we have a loading button loading progress icon as well when we're switching to the next image and you can go back as well and then you can close this image and click on the another one so everything is working and that's how you create an image gallery using HTML CSS and JavaScript I hope you guys liked this video and if you did please like share and subscribe and I'll see you next time clever take you out

Channel: Clever Techie

Views: 237,960

Keywords: image gallery, image gallery css, image gallery in html, image galleryusing html and css, lightbox image gallery, lightbox image gallery html, lightbox gallery, image gallery tutorial, image gallery tutorial css, image gallery tutorial html, image gallery tutorial css and html

Id: TSRtBISvsh4

Length: 10min 38sec (638 seconds)

Published: Sun Sep 16 2018