How to create a SIMPLE HTML & CSS IMAGE GALLERY using Dreamweaver and Lightbox (*EASY TUTORIAL*)

hi and welcome to another tutorial in today's lesson we'll learn how to recreate this html gallery using html css and lightbox so anyways guys let's jump in so the first thing that we have to do here is we have to create our folder structure i've got three folders one for css one for my images and one for the javascript inside of images i've downloaded ten pictures which i've renamed one to ten and i've got these pictures from unsplash so the first thing that we need to do is we need to create thumbnails of these pictures so what i'm going to do is i've downloaded a program which is called windows image resizer and now i can right click and i can resize these pictures i'm just going to use a custom resize and i only want to worry about the width of the pixels and i'm going to set that to 250. once i've done that it will resize your images for you and you can see here that this image is 369 by 250 whereas the original image is 5815 by 3960 so it's a considerably smaller file size once we've done that then we need to open up dreamweaver and we need to create a new document we're going to create a new html document and i'm just going to click on create so the first thing is we need to change the title so this is going to be our image gallery so now once we've put in our image gallery for our title i need to save this document so i'm just going to press ctrl s to save and i'm going to make sure that i'm in my folder where the rest of my css images and javascript are and i'm going to call it index.html now once i've done that i need to create a new css document so i'm going to create another document css and this time i'm going to call this one style dot css and i'm going to place it in the css folder so now i'm going to click save so now if i look in my folder structure in css i have style and in my root directory i have index.html so now what we need to do is i'm going to go within the head tags in my html document so now i'm going to link that css document so i'm going to open up the tag link and then i'm going to write rel and then i'm going to write style sheet and then i'm going to set the type to text and css and then i'm going to put our link in there which is href and then i'm going to look for it in the css folder and i'm going to make sure that i've picked style.css and i'm going to close that off so now i'm going to save that so now what we need to do is we need to add our images in here so i'm going to come down to the body and the first thing that i'm going to do is i'm going to add a heading for our image gallery so this is using the h1 tag and then what i'm going to do is i'm going to open up a div class and this div class is going to be called gallery and then i'm going to close that off and i'm going to put the ending div at the bottom and then what i'm going to do is i'm just going to insert our images into our gallery so we're going to do this by writing img and then src and then i'm pressing enter and now we can go and find our images now i don't want the full size image i want the thumbnail image so i'm going to pick my custom ones and so once i've got that then i will need to copy and paste that code 10 times and then rename all those files again for each image that i have so i'm just going to do that now quickly so now if i preview that you can see i've got my heading 1 tag up there and i've got all my images in this index.html so that's looking pretty cool now we have to move to the css document so what i'm going to do is i'm just going to go and open up my css document you can either do it this way through the code or you can go to style.css just make sure it's the same document so once i've done that the first thing that i need to do is i need to come over here and we're going to set up the body so we're going to set the margin to zero pixels and we are also going to set padding to zero pixels also now we're going to choose a gradient for the background so what i'm going to do is i'm going to come to this website which is called ui gradients and i'm going to choose the gradient color that i want and then i'm just going to come over here and get the css code so all i have to do is copy that and i'm going to paste that into my css now if i save that go back to my index.html you can see that the background has changed and that's looking pretty good so now let's do more code so the first thing that we're going to do is we're going to set up our h1 tag this is how we want it to look so i'm just going to come and set the color and i'm going to set the color to white so that's fff fff and then semicolon the font family is going to be i'm going to use railway so i'm just going to come over here and write rail way and then i will also write sans serif okay and so now if i save that you can see that the font and the color have changed in that h1 tag so we're just going to keep on adding some things and you're free to experiment with whatever settings you like but i'm going to set that to 62 pixels and then i'm going to set the width to 800 and then i'm going to set the line height to also 72 pixels and then i'm going to write text transform and i'm going to transform it to all uppercase press semicolon and then i'm going to change the background color so i'm going to come down here and i'm going to set that to black you can set it to whatever you want and i'm also going to change the letter spacing to negative 2 pixels and i'm going to also add a margin in here so the margin will be 30 pixels then i'll press 0 and 50 pixels and then end that so i'm going to save that refresh and now we've got our image gallery inside this box over here so if i bring it smaller you can see what's happening there so it's looking pretty cool so now what we are going to do is we are going to look at our gallery alright so we are going to open up our gallery we're gonna open up our curly brackets and i'm gonna write a line content and we'll put that into the center and then again we'll set up a margin and then we will put 10 pixels as well as 110 pixels and then we'll close that off so now if i save that all right you can see that now we're pushing that gallery into the center of that document and this is a bit zoomed out so it will look better on a full screen so now what we're going to do is we're going to work on the images so we are going to go and uh write gallery img open up our curly bracket and now we're going to write width and the width is going to be 230 pixels and then the padding is also going to be 5 pixels and now what we're going to do is we're going to put a filter on this so the filter that i want is i want a grayscale filter and i want this to be probably about 80 percent grayscale so we can see a little bit of color on the images and the transition is going to be we'll keep it at around about let's say one second so now if i save that and if i refresh that so now you can see that the images are kind of grayed out and we've set the width of all the images to these settings here with a little bit of padding in between so moving on the next thing that we need to do is we're going to create a hover effect so when we highlight one of these uh images it will you know make it a little bit bigger so to do that what we need to do is we're just going to write dot gallery to start we're going to have img and then we are going to have hover so now once we've got our hover settings in there we are just going to open the curly brackets and then we are going to put filter and we'll change the grayscale back to zero and i'll just close that off and then the transform also we will transform the scale and i'll put this to one point let's say two something like that and then i'll close that off and save it so now if i refresh that okay you can see that every time i hover over the pictures they kind of get bigger so that hover is probably a bit too big so i'm just going to bring it down to let's say 0.1 and so now if i refresh that so now the pictures don't go inside of each other so that's looking pretty good so now once you've done all of that you set up the html and css now you need to download lightbox so you can download lightbox from here and then it will take you to a github website where you can download the source code once you have that set up then you will need to open it up i'm using winrar here and you need to open up all of the files and extract it somewhere to your computer the files that we need to worry about are in this document here so the d-i-s-t and so what we need to do is we need to firstly come over here and we need to get this lightbox min.css and what i'm going to do is i'm just going to drag it to my computer so now i've put it into my css folder all right and so we're going to do the same thing again for the javascript and for the javascript we need to make sure we are using the jquery min javascript file and so what i'm going to do is i'm just going to drag it to my javascript directory so if i look in there i've got javascript in there and the final thing that we're going to do while we're here is we need to go to images and i'm just going to grab these all these images and then dump them into my images folder this is the navigation for the lightbox and you can see that they are here close loading next and preview if you don't have these images it will still work you just won't see these icons and you can change these icons to whatever you like so once i've got that we need to then go back into our code so now we need to go into our index.html and we need to make sure that we're linking those scripts and the other external style sheet so what i'm going to do is i'm just going to add another link rel and then this one's also going to be a style sheet and the type is going to be text css and this time when we link it i'm going to go into my css folder and then i'm going to pick up this lightbox min dot css and then i'm going to close that off now the final thing that we need to do is we need to add the script so i'm just going to come over here and write script and then i'm going to write type and the type of script that we are going to be using is a text javascript and then what i'm going to do is i'm going to write the source for this script and i'm going to find it in the js folder so it's going to be js lightbox plus jquery and then i'm going to close that off so now once i close that off and if i save that that will now link all of these images to these two files here now nothing has changed because we need to add some extra html code so to do this what we need to do is we need to now add the links to the larger graphics so what i'm going to do is i'm going to come over here on the first line of code in my gallery i'm going to write a href and then what i'm going to do is i'm going to browse for that first image so now i'm going to actually pick 1.jpg and then what i'm going to do is i'm going to write some stuff which lightbox will allow us to do so i'm going to write data and then i'm going to write lightbox and then i'm going to write equals and then inside of the quotations i'm going to call this my gallery and then after that what i'm going to do is i'm going to write data and then i'm going to write title and then inside the title it's you can call the picture whatever you want so in the first picture i'm going to call it let's say the wonderful mountain and then once i've done that all i have to do is just close off that tag and then i'm going to move this closing tag to the end of that line of code so it looks something like that and now if i save that and refresh my website you can see over here if i click on this now it opens up that large file with a caption at the bottom and it's looking pretty cool so now all i have to do is just change all of these other lines of code to add those things in so the easiest thing to start with is just look i'll just um i'll just put this uh 10 times this closing bracket and then what i'm gonna do is i'm just going to copy and paste that first link and then i'm just going to duplicate it 10 times and now once i've duplicated it 10 times then you will need to change the images so the second line of code is going to be number two and this is going to be called you know the wonderful cliff and then the third one is going to be three and i think you get the idea so i'll just do this quickly for you guys and so once you've renamed and made sure that every image is the right one for the thumbnail you can save that and then you can go back to your website and preview it so if i preview what that looks like i can come over here and i can click on one of these images you can see my icons are all working here and then i can click and it will move around as well so the final thing i want to do is i just want to center my text so i'm just going to come back to my h1 and i'm just going to write text align and i'm just going to put that into the center so i'm just going to save that and there we go so anyways guys that is a quick tutorial on how to add a lightbox gallery to your html css website hope you learned something thanks for watching and i'll see you guys next time you

Channel: The Online Learning Space

Views: 2,280

Keywords: After EFFECTS, CAD, HSC, IPT, Premiere, Premiere PRO, css, css crash course, css for beginners, css tutorial, design, education, footage, fusion, gallery, graphic, helpful, html, html and css, html tutorial, html tutorial for beginners, image gallery, image gallery in html, image gallery tutorial, indesign, information, learn html, learning, printing, simple image gallery, software, studies, technology, tutor, tutorial, tutorials, web

Id: -hUm37sOH_w

Length: 15min 54sec (954 seconds)

Published: Sat May 01 2021