Gallery Using HTML, CSS, And JavaScript | How To Open Images Using JavaScript | JavaScript Tutorial

today we're going to learn how to build a JavaScript gallery which is something that has been requested quite frequently inside my HTML CSS course since we did actually build a HTML CSS gallery but we never learned how to open the images inside full view inside the browser once you actually click them so today we're going to learn how to build a javascript gallery so what are you going to need in order to actually be able to do this episode it's basic knowledge in HTML and CSS and you don't really need to know anything in JavaScript but it would help if you knew a little bit in JavaScript because I will go through the Java code step by step so you know exactly what it does but again the more JavaScript you know the more it's going to be easy for you to understand it that's just how things are so inside my gallery I have all these images here and as you can see we will also learn how to insert images that can stretch down this way you might not know it but this is actually something that is quite tough to do if you do it the old CSS way so using the newer CSS or more specifically CSS grid we will be able to insert images like this that goes down and takes up two spaces instead so this is something we'll be able to do now the JavaScript part is that when I do actually click one of these images you can see that it opens up into full view and we can then switch images by clicking the next button on the side here so this is something that we have to be able to do in order to view a gallery because this sort of makes sense that when you make a gallery is to be able to view the images so this is what we're going to be building today inside my text editor and I will be using visual studio code in case you want to know what TextEdit I'm using here it doesn't matter which text editor you do use but Visual Studio code here is the one that I prefer for this episode here it has a very good syntax so I thought this one might be a good one to to sort of promote today I'm not sponsored I just wanted to mention that inside this text editor I have a couple of different files and I just want to explain why exactly why exactly I have those files and what we're going to be using these files so inside my CSS folder as you can see I have a couple of different folders inside my root directory which is the place where you have your website I have an index file which is the one you see right in front of me here I also have a CSS folder a image folder and a JavaScript folder in sap my CSS folder I have a reset stylesheet if you've never learned about a research stylesheet before I do have a video on it so if you want to see it I will leave a link for in the description so I went ahead and included this research star seed inside at the top of my index page as you can see I have three different style sheets I have my reset one which is the first one you have to make sure that it's the first one then I have something called a main that CSS file this is where I insert all the main styling that is not going to be part of the gallery specifically but just a main styling of my website so for example different rappers default styling for my paragraphs for my title I also went ahead and included my header stylings in here since the header is going to appear in all my web pages but in here I have some styling for my current website now this is to going to be the final product right this is not the one that I'm showing right now inside my text editor what I stand inside my main that CSS file is a just inserted a header at the top here that has a navigation in it and a logo on the side that's all I did so everything else you see below here with the gallery is going to be inside my gallery dot CSS file which is going to be right here as you can see there's nothing in here right now because we haven't started yet and since I get a lot of complaints from people who wants to see me do all the styling and people who say that styling is a waste of time I should just show how to do the JavaScript or the PSP or whatever course I might be doing there's always people that sort of you know disagree there but I will be showing the CSS in this episode since I think it's quite important at least for the gallery part I'll be showing the CSS again if you do want to have all my files that I'm using this episode you can go to my patreon I have a link the description you can download the entire project here do keep in mind I'm not leaving anything out regarding the gallery that we're building today in those files this is just in case you made a mistake and you don't know you know how to correct it and you might want to see my files and see you know sort of compare the next to each other you can do that using my patreon so we're going to be styling the gallery the CSS together now before we do anything we're just gonna take this step by step because I don't want to jump back and forward files too much because that might confuse you too much so what I'm going to do to start with here is I will go ahead and start with the index file and then we're just gonna take it from there we're gonna finish off the index file then we're gonna go to the gallery that CSS file we're gonna finish that one or at least as much as possible before we start the gallery J's file because I also have a JavaScript file inside my JavaScript folder called gallery dot J yes this is going to be the one takes care of everything regarding the gallery meaning that we open up the image we switch to the next image we close down the image get again using this specific file here I do also have an image folder and just to sort of explain what I did in here now it is quite important to do this the same way as I did in order to get this working the same way again there's a lot of ways you can build a gallery using javascript this was just the way that I came up with and by the way I just want to mention I'm not using any sort of frameworks I'm not using any sort of libraries this is pure JavaScript so this is something that everyone will be able to just sort of follow along on even if they don't know how to install libraries like jQuery or something inside my image folder I have a couple of different images I have a well I have a background image that we're not really gonna use for anything so I'm just gonna go ahead and delete that that is not going to be part of this episode here I also have a couple of extra local images we don't actually need to have those either so just bear with me I'm just gonna delete the images that we don't need to have so as you can see I have my images in here these are the full images by the way these are the ones that are you know full quality high resolution and then I have my logo down here at the bottom do you notice that when I named these images I called an IMG one dot jpg IMG to the JPEG IMG three you sort of get the idea I named them and gave them a number the number you give these images are going to be the order in which they're going to appear inside your gallery this is important to note so do make sure that you name these in the order that you want them to show up inside the gallery at you also have a thumbs folder in SAP Muhammad's folder inside of this one I have all the thumbnails so you're going to see inside the website just to show you what I mean this image that you see right here that is very tiny and I can click on in order to open it up is not the same image as this one it's very important to note because when you load your website if I were to refresh my website you see it loads very fast you barely notice it that's because these thumbnails are much lower resolution then these images are so it's very important that you have two separate images one that is low resolution I usually say I just take the width as a thousand pixels for all the images for the thumbnail and then I just do the full resolution for the big image unless it's like incredibly big resolution so you might want to scale it down if it's too big so going back inside our text editor I'm just going to go to close down my image folder again if you don't have any images to use for this episode just go ahead and download something I will leave a link for a place where you can download oil two free images in the description so go down there get a couple of images and then resize them in Photoshop or something if you have Photoshop and then return to them so once you have the images ready it's very important we have images otherwise we can't do a gallery inside our website so with that in mind let's go ahead and start with our index dot HTML file so what I did here is I created my header section and again this is not something that I should teach you because it's just a basic header for a website you can make this however you feel like this has no effect on the gallery so please stop writing in the comments section that I'm leaving out code because it didn't show you the styling or the HTML for the header in detail because this is something that you should be able to do by now after the header we're gonna actually start the actual gallery so down here I'm gonna create a section and I'm going to do a couple of different things to this section here what I'm going to do to start with is I want to make sure I insert just a small paragraph or title for my gallery because that usually goes with a gallery so let's just go and create a paragraph I'm gonna call this one Daniel Nelson which is my name just so people know whose gallery it is then I might want to include a title so I'm going to say I have an 8 to here so now we just have some basic title T you don't need to have this but if you want to have titles this is something you could do what I'm going to do now is I'm going to insert the actual images and I did have to sort of decide for this episode if I wanted to do that using javascript I've wanted to do that using HTML CSS and because I know that some people who are watching this episode might not be JavaScript experts it might make more sense to do this using HTML CSS and again I think that the JavaScript way is just an alternative way to do it might not necessarily be a better way to do it so you know we're just doing it the HTML CSS way here so in here what we're going to do is we're going to insert a div and this is not something that has to be a specific type of HTML element we're just gonna insert a basic div for this I'm gonna go and give this one a class and the class is going to be equal to two things it's going to be equal to gallery image gallery - image this is one styling and I'm also going to include a second class and it's going to be called image 1 so now you can see that we're sort of getting into something here where each div is going to be the images that would that were inserting into the gallery so the thumbnails afterwards I'm gonna create another div inside this dip box here because if I were to go back inside the full example you can see when I hover on these thumbnails I have this black overlay that is a little bit transparent but there's a black overlay with a title of the image inside of it this is what we're going to create right now so in order to do that what I decided to do is I'm creating a second div which is going to be the black background and then I'm going to create an anchor tag inside of it and then inside the actual text we can insert the title for the actual image now right now I don't really have any titles for my images so I'm just gonna say this is a title again you can call it the actual title of your images if you want to and just I don't have a title here so I'm just gonna do something default so now that we have this we actually have the first image so now we're going to copy this paste it down and I have seven images inside my gallery so I'm gonna do two seven times so that's two three four five six seven and then I'm just gonna go and change the names accordingly so the first one is image one inside the class the same one's gonna be image - it was three us four ms5 image six and image seven the reason need to have these individually is because using CSS grid a little bit later we do need to define a grid area for each section here so to sort of tell it whether or not we want the image to stretch down in two spaces or maybe across two spaces if you want to do that so that's something we need to do in order to be able to define that now when it comes to linking to the JavaScript file you can link a JavaScript file either at the top here inside the head tag you can do it inside the body tag or you can do it after the body tag at the end here the important thing about this specific javascript file is that we do need to have the images loaded in order to do something to the images using javascript so I do want to make sure that I included after all the images and stuff has been loaded so I'm going to do it right before we close off the body tag here we're going to insert a script tag and I'm going to link to my J's folder and the gallery dot J's file like so so now we link to the JavaScript file and we'll actually completely done with the index page which is kind of nice so what we can do now is we can jump into our CSS file because we do need to style this section we just created here okay so we did actually need to do one more thing inside the index page which is going to be the last thing inside the actual section text that is wrapped around our gallery we do need to include an ID and a class so we're going to say we want to have a ID set equal to double quotes and then I want to call this one index - gallery just to know that this is the gallery section inside our index page then I want to include a class and I want to call this one rapper - gallery now the rapper - gallery has been defined inside my main that CSS file so just in case you do want to have this I have a rapper - gallery that simply has a margin set to 0 and 20 view width which is the the view width of your current browser so this is what I have for my gallery again the margin can be whatever you want it to be it's just personal preference here so inside our gallery that CSS file the first thing I want to do is I want to style the index - gallery ID that we have for the container for the entire gallery so what I want to do here is I want to say index - gallery and I want to go ahead and style it inside the styling here the first thing we're going to do is we're going to say want to display this as a grid type and if you're not familiar with a grid when it comes to CSS I do have an episode on it that I will leave a link for in the description basically we can create layouts inside our websites using a grid which is something that is quite new and when I say quite new it's it's a couple of years old but it is something that I see a lot of people are still not using and I think it's a really cool feature so we're gonna use CSS grid in order to create a cool layout for our gallery here so going to display this as a grid there we go then the next thing we're going to do is we're going to define the specifics of this grid that we're building here you know how many columns do we want to have how do we want to display the rows you know do you want to define a gap between the grid items and the first thing we're going to do this we're going to define the columns inside out grid so we're going to say want to create a grid - template - columns so we need to define how many columns and how large should they be now I'm going to use one fraction I'm going to do that four times to define that I want to have four different columns going down so the gallery right now is four columns and they should each be individually spaced so whatever width they have available to them should be divided even the out throughout that space after we've done this we're going to define a grid template row and we're just gonna set this one to outer we're also gonna go and define a grid gap let me just go and show you inside the actual website here we're going to set this one to ten pixels and if you can tell inside my website but you actually have a gap in between all the different gallery items and this gap here's what we're defining right now using this grid here now there is one more thing you need to do in here but I'm not going to do it just quite yet because it might not make sense for you unless we have some other CSS styling as well so let's go and continue downwards and we're just gonna go ahead and copy/paste what we have here copy paste and instead of styling the container we're gonna go ahead and style the actual images inside the container now we do have two types of classes we have one called gallery - image and then we have one that is called image one or depending on the image is going to be a separate number so the gallery image is going to be the default styling for all the different images we have inside the gallery the image one two three and four and so on are going to be the individual stylings of each image if that makes sense because by doing it that way we don't have to double create a bunch of CSS styling inside the different images we can just do it in one place and then the you know whatever styling has to be different with you in separate stylings so in here what I'm going to define first is that we're going to say well first of all we're not styling the index desk gallery when set style in the class called gallery - image IMG in here the first thing we're going to do is we're going to define a width for the individual images now do keep in mind we do have a grid going and it's automatically going to assign a certain width to all the images but the actual image in order for the image to stretch inside the grid container to the edges we do X need to define a hundred percent with that I'm going to go down and define how tall I want each image to be now this one you can decide for yourself how tall do you want your gallery images or the thumbnails inside the gallery images to be I decided to make it into 300 pixels which means that it's going to be 300 pixels going from the top to bottom you can always change this into something else so going back inside or styling I'm going to call it 300 pixels and now I just need to define the actual images that are going to be inserted as backgrounds inside these different gallery image containers here so what I'm going to do is I'm going to say well we're going to have a background - repeat and it's going to be set to no-repeat then I want to define a background size and I want to set this one to cover it's essentially that it should cover this entire square here that's what we're doing we're going to define one last thing regarding the background image which is going to be where should be positioned I'm going to Center it we do need to do one more thing here so I'm going to set that we also want a cursor which means that when I put my mouse cursor on top of the image I wanted to you know have this little hand simple that we usually get you can actually see it right now this little hand symbol here we want to have so I'm going to set this one to pointer so now that we have this we're actually done styling the default styling for all the different images let's actually go to open up the current one that were actually working on right now so we were to go in here and open it up you can actually see that this is how it looks like right now now the reason we don't have anything in here is because first of all we didn't actually position these inside the grid like they're supposed to be which is why I waited with doing that at the top there remember I said that we need to have one more thing up here that's going to be like where the images needs to be positioned as well as the title inside the gallery because remember we did also create a paragraph and an h2 tag those also needs to be placed inside here so going back inside on gallery the CSS file were actually going to be styling the individual images that we have inside our gallery so going down to the next line I'm going to just create a comment because that might be a good idea so we know exactly where the images are I'm gonna say images and then I'm going to say we want to style first of all I'm just go ahead and copy what we have here first of all I want to go ahead and style the first image so instead of referring to the gallery - emits class which was the default styling I'm going to say we have something called IMT one which was the class we referred to inside the first image then I want to say that I want to create a grid that area and what the grid test area does is that it sort of labels a name for this specific image here that we can then use inside D above index gallery styling because we will return to this one just create the last piece of styling for now just go and give this one a name so I'm going to call this one IMT one that's going to be the name for that one then I also want to include the actual link to the image that is going to be displayed inside this specific image here so I'm going to say I want to create a background - image URL parentheses and inside the parentheses I want to actually link to the actual image that I want to be shown inside what we have here so right now we're inside our CSS folder so I need to go back one directory then I need to go inside my image folder and then inside my thumbs folder because these are the thumbnails these are not the actual full imagers and then I want to link to image one the jpg now that we did this we can actually go and copy-paste we had seven images who need to do this seven times I think that was seven and I'm just gonna go and change everywhere where it says one to a two because that is the easy way to do it and I'm just gonna go and change the next one to three then the next one to four and you can sort of see how this is just very simple to do you just gotta change at three different places inside the class name inside the grid area label that we created and also inside the link we have down there so now that we have these we also have the paragraph and the h2 tag that we inserted inside our image gallery section here so let's also go and include those so I'm going to save we have a just going to copy paste we have two more we have a paragraph and we also have an h2 tag and what I want to do here is I don't want to link to any sort of background image I just sort of want to give them a grid area label so I'm just gonna call this one something like gallery - P let's actually spell correctly there you go then I want to do the same thing for below here Gallery - H - let's go ahead and return up to our container which is the index - gallery ID we have up here and inside of here I'm going to create something called a grid template areas and then what we can do in here is we can actually define how we want these to be laid out inside our actual web site so if I were to just save what we have here really quick just to show you what we have you can see that we have all the different images but they're all in the same place and it doesn't make sense and that's because all the images on top of each other right now and we need to tell it where do we want to place these images inside the grid we created right now it's just placed over and this grid over here but we need to spread them out so inside our styling I'm going to say well we have the first row in here and I want to go ahead and say well I want to grab first of all the gallery - P which is going to be the paragraph and I want to insert that one into the first row now do keep in mind we have four columns so in the first row I'm going to copy pasted in gallery P four times to make sure it has the entire row for itself then I want to go down to next line and do make sure that you don't have this semicolon after each line it should only be after the last line that is important and then I'm going to create a second row in here I want to have the eighth - so just have that row for itself so again paste it in four times then I want to go down one more line for the next row and now we need to start inserting the images so what I want to do here is I want to take my first image paste that in inside the first space inside the grid space then I want to insert the second image space then I want to insert the third image and now keep in mind in my example here I do have an image if you go back to the full version that stretches down to spaces we need to keep that in mind for the next row okay so that's the third image this is one two and the third image so going back in here going to insert image for and now that we go down to the next row we're going to insert image five then image six and for the next one here we want the 3rd image to stretch down two spaces going downwards so I'm going to insert image three again to say that it's allowed to go down there and then image seven okay does that make sense image three two spaces here that is how it's supposed to look like good so now that we have this we essentially have something called a grid so for were to go back to our current version we're working on refreshing you can now see that we're splitting them up in here now one thing you're going to notice here as well is that our third image that is supposed to go down there does not actually go down there and there's a very good reason for why this is happening so if I were to go back inside my styling we do actually need to go down to the third image down here and include one more piece of styling which is going to be a height for this image that we have right here now the height that we're going to set here is going to be equal to the default styling we set up here that we set to 300 pixels for all the images we're going to change that one from 300 to 300 plus 300 because we're going downwards a second space but we also need to make sure that because we have a gap set to 10 pixels that we add that to it as well so going down here inside image number three we're going to set this one to six hundred and ten pixels so you do need to make sure that you change the height for the images that you want to cover two spaces going down that is something you need to do manually so having done this we can actually go back inside our website refresh and as you can see we now have the gallery that we want to have in here now the titles haven't really been styled yet and we have no harbour effect when we hover over the images don't worry we'll get to that so going back into our code or inside our CSS file I'm gonna go down all the way to the bottom and the next thing we're going to do is we're actually going to style the things that are inside the images so the background that turns black and the what you call the actual titles that pop up we're going to style those things inside here so going down we're gonna create another comments just let me know exactly what we're dealing with then we're going to go down and I'm going to style the gallery - image which is the default styling or referencing - for all the images again you sort of know that by now and then I want to reference to the div that is inside our image so the div tag that is inside our images you know the individual images then I want to open up the curly brackets and in here we're going to set the styling for the the black background that we have in there so I want to set a width to a hundred percent you should also go all the way from from top to bottom so we're going to set a height as 100% then we want to set up background color and I want to set this one to a very dark color so we could just set it to black there you go for the opacity we're gonna set it to zero because we don't want to see it just quite yet we only want to see the background when we hover the cursor on top of the images so we're gonna create a hover effect afterwards that is going to set the opacity to something a little bit bigger than zero because zero means we can't see it after the opacity we're going to create a flexbox if you haven't learned about flexbox yet I do also have a video on that so again in the description of this video here you can learn about flexbox so we're going to create a display as flex and then I want to set a couple of different parameters for this specific flex that we're creating here the first one is going to be do I want to Center the content horizontally and do I want to Center it vertically which is a very easy way to Center elements using flex or flex box so what I'm going to do here is I'm going to justify content and I want to set this one to Center then I want to also align items to Center and just by doing this all the content that is inside this box here is going to be centered like completely centered it's a very cool way to do it and we didn't have it in the past like many years ago but it's something we have now which make things a lot easier so what I'm going to do now is going back inside our index page just to see what we're dealing with here so right now we start this dip tag that is around the actual title now we need to style the anchor tag I'm just going to copy paste what we have here and I'm going to delete what we have inside of here then I'm going to say that we don't want to style the div but the anchor tag that we have in here I'm going to set a font family font that family again I don't have any sort of special fonts imported I'm just going to use Arial because that is just a standard font I'm not really crazy about these standard fonts but they're what we have right now so we're gonna set a font size font - size and I'm going to set this one to 18 pixels we're also gonna add a color I'm gonna set the color to white then I want to sexed a text decoration to none because when you use a anchor tag inside any sort of website it will have an underline under it as a default we want to remove that so I'm going to say none then I also want to say text transform and set it to uppercase because I want my text to be uppercase inside the titles here so now we style to text and what we need to do next is we need to style the hover effect that is go to happen once I put my cursor on top of the dip box because I want the black background to actually appear once I do that so going down here I'm going to insert or just copy-paste my div styling and I'm going to say : hover afterwards inside the path and I want to change the opacity so I'm going to say I want to delete everything except the opacity which I'm then going to set to 0.8 so not completely black background but a little bit transparent still because I still want to see the background image that is behind there we do need to do one more thing because right now it is going to change very suddenly I want to have a smooth transition to the fading of the title and background so I'm going to say transition and set this one to all ease in and out and just about a hundred milliseconds I think is fine save this go back inside your website and refresh and now I can see we have something that looks a lot closer to what I have here now of course I do also have some spacing in my live example or the the finished version from underneath the h2 tag just go and include that if you need to have that as you can see there's a little bit of space missing it doesn't really matter for the gallery but if you want to have that it you can just go ahead and style the h2 tag there now before we do anything else using CSS we're going to jump into our gallery the J's file because I think we're going to be jumping a little bit back and forward into the CSS file and the JavaScript file which I hope is not going to get too confusing for you I'll try to explain it as well as I can why we have to go back and forward so for now let's just go and start with the gallery dot js5 which is going to be our JavaScript code so inside our gallery dot J's file the first thing we're going to do is we have three different variables that we need to set in order to sort of keep track of certain things when it comes to this gallery for example what is the last image we opened up how many images do we have in here that I actually inside the galleries you know things like that so the first thing we're going to do is we're going to create a variable let's a variable would probably be preferred going to call this on gallery images going to set this one equal to document dot query selector all predecease semicolon and what we're basically doing here for people who are not that familiar with javascript is that we're saying okay we're creating a variable which is the type of container that can contain information and we want to set this equal to all the gallery images we have inside our gallery so I'm saying we have a document which right now is our index.html file and inside this document I want to select all elements that has a certain class part of it so I want to say all the ones that has gallery - IMG inside of them once I did that all the images are going to be set equal to this variable here so we can now refer to it later on so that was a quick catch up on what a variable is again we're not gonna talk too much about that because it's very basic JavaScript so there are some people watching as well that do know JavaScript we're also gonna code and set a variable that I'm going to call get latest opened image and I'm not gonna set this one equal to anything because this is just one that's going to keep track of what the latest opened image is because we haven't open any images yet it's not going to be equal to anything then I'm going to set a third variable that is going to be called window width is going to be equal to window dot inner width so what I'm doing here is I'm saying that I also want to grab the current width of the window we have inside the browser so I'm going to say want to reference to the window where inside of which is an object in itself then I want to get a property called inner width so the total width of our browser window is what I'm storing inside this variable here so now what I want to do is I want to actually create the JavaScript code that goes in and does something whenever we click on one of the images so the first thing I'm going to do using an if statement is I'm going to go ahead and run a condition to check whether or not there actually is any images inside this website here so I'm going to say I want to grab my gallery images variable and just sort of run it inside my if statement this is going to return false if you don't have any images and it's going to return true if you do have any images inside of here we then need to grab all the elements that has this class attached to it right now if it were to just create an unclick function which means that if I were to click on one of the images something needs to happen then it's only going to do to the first image if it were to reference to the gallery images up here so it's very important that we sort of loop through all the elements and run this function down here on all the elements that were grabbing from inside our website so all the images that we have needs to run a function on all of them individually I think I just repeated myself there so inside our if statement I'm going to again reference to gallery images they don't want to run a for each function that is going to simply go in and for each element that we have inside gallery images it's going to do something to them so in this case here I want to run a function for each one of these so I'm going to say we have a function parentheses and inside this function here we're going to insert a couple of different parameters for now we're just not going to do it because I want to create them as we do need to use them so you know exactly why we need to have them we're also gonna go and close off the function with curly brackets and move it down to the next line so now it looks like this hopefully it's not too confusing and too technical for you at the moment I do actually have a error here we do need to change the comment into a punctuation make sure you do that now for this next section here I'm going to try and explain this as simple as I can right now we have this variable up here that has all the images that has this class attached to it stored inside this variable and they're going to get stored in here as an array meaning that were we have a container with many different images inside of it now this function down here is going to be a function that allow for us to when we click on the image open the image up and actually see it in full view but we need to do that on all the images inside this array up here okay so inside the function here we need to reference to the element that we clicked on that has this class attached to it which means that inside is function down here we need to have a keyword that actually references to the first elements inside the array up here and that keyword needs to be inserted as the first parameter inside all for each method here this method has many different parameters inside of it we can set if you want to the first one is sort of required to set which is going to be the actual element that we have inside this array up here and we need to insert that inside our function here so I'm going to say we have a image and this is going to be the keyword whenever we need to reference to the actual element inside this array up here so inside of here I want to reference to the actual element which is the first element or the first image that we have inside this variable up here and I want to run a on click event on this image here so I'm going to say we have a on click event which means that when we click the image then I want to set equal to another function now this function here is going to get run whenever we click on any of the images inside of galleries so if I were to alert something here just to sort of show you say alert it works let's just go ahead and save that go inside our browser refresh you can see when I click it says it works for all the images we have in here if I did not use the for each method the one that we have right here then it would only work for the first image which is why we need to do it and this sort of complicated way so now that we have this and we actually demonstrated that it does actually work inside our website what I need to do now is I need to actually get the image that I want to display in full view because right now we just have this they'll hear but I want to grab the full image version so I can display it in a full view so we need to grab that image inside our image folder which is right here so all these images here actually know these images here we need to grab let them not the ones inside the thumbs folder so what I'm going to do is I'm going to create a variable I'm gonna call this one gets element CSS and I'm going to set this one equal to window dot get computed style now we haven't talked about get computed style inside my JavaScript course the essence of the way this one works is that we get all the styling from inside the CSS file so not inline styling that is a little bit different if it were to go inside my index page if it were to take one of the HTML elements if I want to run a style equal to double quotes this would be inline styling that is very easy to grab using JavaScript but if you want to grab a CSS file styling it's going to be very different so inside my JavaScript file I want to grab all the styling that we have applied to this element here this image that we're right now clicking and when I do that it means that we're going to grab the background image URL as well because that's going to be part of that styling so once we have this styling here we can go ahead and take this URL and break it down so we know exactly what the image number is that we clicked on that's what we're going to do now need to figure out which image have we clicked on in order to access show the full version of that image inside our browser so going back inside our JavaScript file we're going to go down to next line I'm going to set another variable type going to get this one get full image URL I'm going to set this one equal to get element CSS dot get property value parentheses and then close it off now what we're going to do here is we had this long list of CSS that is applied to our main image here or the the image that were referencing to and I want to get a specific styling property that's what we're doing here we want to get the element CSS which is right now this image here and I want to get a specific property which is going to be in this case here the background image property so right now we're getting the the you know whatever is applied to the image background inside our CSS file which means that we're going to get this right here that's what we're getting we're getting the URL for the actual image so now that we have the URL for the image that is used for the thumbnail we can now break it down and get the image for the full image using a little bit of JavaScript magic here so going down to the next line I'm going to create another variable and I'm going to call this one gets image URL position or pause for position I'm going to set this one equal to the get full image URL we have up here because that is going to be the the value of the background image of this image here and I want to split it going to run something called a split method now this method here is going to take this whatever value we have up here which is right now the the URL for the thumbnail image and it's going to allow for us to split it apart because it just needs the last half of it so I'm going to say that we have inside this URL maybe I should actually go ahead and and alert this out so you can see what I'm trying to do here let's go ahead and alert get full image URL and actually see it inside the browser so if it were to refresh you can see we have this long URL here if we were to go down to the last part of the URL we have our image folder our thumbs folder and then the image name so that's the part I want to grab I just want to grab that last part so what I want to do is I want to go inside my JavaScript here and I want to say I want to split it and I want to split it at the part of the URL which says image forward slash thumbs forward slash so now that we did this this variable here contains two pieces of data because we split the UL into two pieces of chunks so it's going to have the first part which we don't need because that's just mess we don't need that part of the UL the second part however is going to contain the actual last part of the UIL which is going to be the image name and the you know the image position so what I'm going to do is I'm going to take this get image URL position and I'm going to copy it and create a new variable I'm gonna call this one set new image URL so I'm going to create a new ul for the image set it equal to this variable we have up here get called get URL position and I'm going to reference to the second index inside that array now in JavaScript or an any sort of programming language we start at 0 so 0 1 2 3 and so on so the first index is going to be 0 and the second index is going to be 1 so having grabbed the last part of this split up here that we created the last part of the URL what I can do is I can actually run a replace method that is going to go in and remove a little bit of this URL because let me show you if I were to again alert this what we have let me go on alert the get image URL position the second part of it so the first index and go inside the browser refresh you can see the right now we get the the name of the image but we also get this weird double quote parentheses at the end so we need to remove that inside the URL otherwise we can't use this so we're going to run a another method called replace and I'm going to say that I want to go in here and I want to replace a double quote and a print seized with nothing so we're just gonna go ahead and say we want to replace this with nothing and that way we just sort of get rid of it so once we've done that we now have two new URL for the image if we were to actually load this out just to show you you can see that now we only get the image name we don't have any sort of noise or mess inside the unit the UL for the image we only have the name for the the image so with this we now have the actual name for the image that we just clicked on inside our gallery so the next thing we need to do is I want to go ahead and set this variable up here and say okay when I click this image that was the last image we just clicked on so we're going to set this variable up here so I'm going to just sort of copy paste it in and I want to set it equal to the current image that were right now clicked on now we could do something very messy and complicated very similar to what we just did or I could go inside my function up here where I inserted the first parameter which is the element we clicked on and include a second parameter and I'm just gonna call this one index now what this second parameter does is that it counts the current index of this array that we have up here so we have all the images inside an array and it's going to count which position inside the array it is so if I click the first image is going to be positioned at number zero because remember I mentioned that we start at zero in JavaScript so zero one two three and so on so the first image inside the gallery is going to be called zero so if I were to copy-paste the index in here it will now say that get latest open image is going to be equal to zero but just to sort of make this a little bit more sensible to us because right now if we were to click the first image inside the actual gallery it is going to be image number one at least in a URL it says image number one so I want to go ahead and add one to this just to make sure that it's somewhat more easy to deal with when it comes to figuring out what the image was that just clicked on so now that we have that we can go down and the next thing we need to do is we need to - your pop-up window that is going to pop up on the screen and actually show the image inside of it so what I'm going to do is I'm going to create a new variable I'm gonna call this one let's container and I'm going to set this one equal to document dot body because when I create this popup window we need to define where do we want to create the pop-up window and I'm just gonna go and create it in the body of our page so having done this we can now say we want to create a second variable I'm gonna call this one new image window I'm going to set it equal to document dot creates elements parentheses semicolon and inside this create element method here we're going to tell the what do you call it our JavaScript code they want to create a new element that we want to insert into our web page or a new node as you might call it so we're going to create something called a div which is going to be just a regular dip box that is going to have the image inside of it when it pops up on the screen and I also want to go ahead and actually create this one so after we created this element the next thing we need to do is we need to actually apply the element to our actual body of our website because even though we created we haven't actually attached it inside our website so going down here I'm going to say they want to reference to I want to reference to the container and then I want to say dot append child which is another JavaScript method that is going to apply the div to the body of our website so if were to actually do this and then reference to the new image window that I'm going to append to it we now have a div image or Dib box inside the website when we do actually click on one of the images so just to sort of demonstrate let's go back to the website and if we were to refresh when I click one of these images that's actually going to inspect it otherwise you can't see it what exactly is happening here if I were to click get and then go down here you can actually see that we have a dip box down here at the bottom you might not be able to see it it's not that big but we do actually have a dip box created at the bottom here that keeps popping up so this dip box is going to be the container for the actual image wants you to actually create it so going back inside our code what we're now going to do is we're going to set a couple of different attributes for this dip box here that is going to be the full width of the entire browser so we're going to say we have this new element we created called new image window and I want to set a attribute to it I'm going to set an attribute which is first of all going to be a class so going to create a class attribute inside this element here and I want to set this one equal to image window image this window okay so now we create a class with this element the next thing we're going to do is we're going to add a second attribute and this one is going to be a on click event which is going to run a method or function inside our JavaScript file here called close image and we do actually need to make sure we add the parentheses to it so what we're doing here is we're adding first of all a class so we can style it inside our CSS file which means that we're going to return to a CSS file in just a second and we also added a unclick event which means that when I do actually click on this big container here it is going to close down the image using a function we haven't created yet we're going to do that a little bit later so having created this let's actually go ahead and go back inside our CSS file I'm going to go ahead and create the CSS styling for this image that is going to pop up so what I'm going to do is I'm going to create a comment to make it easier for us then for the actual styling I'm going to say I want to reference to the image window class and remember this is the class that we apply to this file or to this div using our set attribute down here so now when I create this div it's going to have a couple of different attributes that can actually demonstrate that really quick before we do anything so if it were to click something you can see the div at the bottom here the new div has imaged as we know as a class and an onclick event called closed image function so going back inside our stylesheet I'm going to say I want to style this and first of all want to give this a width and the width is going to be a hundred view width so it's going to be the total width of the browser then I want to set a height which is going to be the complete height of the browser so a hundred view height and then I want to set a background color background color is going to be just a black color I'm guessing as tag zero zero zero and I also want to set a position because I wanted to be at a layer that is going to be on top of everything else on the website so in order to do that need to create a position styling so going to set a position it's going to be fixed and then I want to say that from the top I want this to start at zero so it's going to go all the way up to the top of the website and from the left I want to start start at zero then I also want to make sure that well actually let's go ahead and just check this out before we continue if I were to refresh you can now see that now we get this little pop up here once we do it we need to refresh now in order to get it back its normal again so now I can see whenever I click we get this box that pops up so the next thing we need to style in here is going to be the cursor because I want to have a cursor icon once I do actually put my curse on it so it's going to be a pointer which again is the hand symbol then I want to set a display flex because whenever I insert this image inside this container here that is going to be shown I want it to be centered inside this container so I'm gonna use that using a flex box so I'm going to say I want to again justify we could actually just sort of copy/paste is because we did this already where it says flex up here we're just gonna copy the justified content and align items so we're just gonna paste it in and then the last thing we need to do is I want to set a set index which is going to be the layer in which this is going to be positioned and I want this to be positioned at 100 just to give it some kind of high number once we've done this and once we create the image we need the image to be on top of this pop-up window which means it needs to have a set index that is higher than 100 so I'm just gonna do like 500 or something so now that we have this what we're going to do is we're just gonna go and create the styling for the image once we insert the image into this container here so below here I'm going to copy paste it in lead all the styling and inside the path I'm going to say image so image window class image which means that right now we're styling the image that is going to get inserted inside the container for this one we don't need to have a lot of styling I just want to set a max height and set it to 80 view height and I also want to set a max width max test with to 80 view width so basically what we're doing here is once we do actually display the image inside this container here is I want to make sure it doesn't go all the way up to the top and a dozen I don't want it to go all the way to the left and right I want to make sure that it fits inside my browser window but it shouldn't go all the way up to the top and and and sides that's basic what we did there so now that we have this we actually have all the styling for the actual image so going back inside our gallery at the jas file which is going to be the javascript file we can now insert the image inside the container we just build so going down a couple lines just to sort of separate the code I'm now going to create a new variable and I'm going to call this one new image and we can basically just copy-paste what we have up here because I'm going to create a new element which in this case is not going to be a div but an image and then we also need to do the same thing here so I'm just gonna copy the a pinch I'll method and we're just gonna change a few things here because now we're trying to insert the image inside the container we just build so we're going to reference to the new image window which we have up here that's going to be what we insert the image into and then I want to insert the new image inside the new window we just created so having we now need to set a couple of different attributes with this image because we need to have first of all a source so we can actually link to the right image that needs to get inserted and we also want to have an ID for the image here so I'm going to say we have a set attribute so again I'm just gonna copy paste and I'm going to change it so that it's the new image that gets a new attribute which is going to be a source so inside the path here we're going to say we have an image folder that contains two images forward slash and then I want to link to the image that we grabbed from up inside the URL so I'm going to copy this variable and after the double quotes I'm going to say plus set new image URL so right now we do actually get an image so let's go ahead and go back inside our website refresh it and there you go now we have an image that opens now there is one more styling thing that we need to have here because the background is not transparent right now so let's actually go and change that going back inside our gallery touch CSS file we did access say they have to have a black background let's actually go and change that to something else and instead we're going to include a RGB a color code which means how transparent do we also want the color of the background to be this is also a very neat way to add colors so I'm going to say zero zero zero zero point eight so the first three zeros is just going to be the color code for black and then the last part T is going to be the transparency so zero point eight which is almost completely black but not quite so if I were to go back inside the website refresh you can now see we can see the background through it okay now the next issue is that we can't close the image so that's also something we need to take care of so if we were to go back inside our JavaScript file you can actually see that if I were to go back up inside where we created the window right here you can also see I included a on click event called closed image which is the name of the function we need to to actually run so I'm going to go down and create a new function and I'm going to call this one closed in so we're going to say we have a function fantasies let's actually call this one what is supposed to be there we go close image and inside this function here we're going to run one line of code that is going to remove first of all the actual window inside you know the actual window that pops up inside the website with the image inside of it so I'm going to say I want to go inside my documents dot query selector and I'm just gonna grab one so it's not going to be cursed like to all it's just going to be query selector parentheses and I want to grab a class called image vast window because remember the window that we created up here right here that has this unclick function inside of it does also have a class called image - window we made sure to include that so we can actually say that we want to grab this and remove it so going to run a remove method here so now if we were to actually save this go inside my browser open up a window and click you can see we now close it down again all the notes inside the actual element here also gets deleted so the image itself is also deleted just to point that out so it's not existing inside the website anymore so going back inside our code we also want to make sure that we can actually change the images once we're inside the website so that's going to be what we want to create next so inside our code up inside our our main function up here the one that actually opens up the image after we create the new image I want to also create a couple of buttons on the side of the image that I can click on so in here I'm going to say I want to create a new variable called new breathe BTN which is new previous button we're going to create a new button I'm going to set it equal to create element so we just copy/paste from up here essentially and I want to create a anchor tag in this case here after creating an anchor tag I want to also go ahead and create a text node because I want some text to go inside this anchor tag so I'm going to say I want to create a new variable called BTN proof text and I'm going to set this one equal to document dot create text node which is right down there parentheses and now I can sort of decide what do you want to be inside this button here now do keep in mind our CSS styling might need to be a little bit different depending on the length of the word you use in here in my case here I'm just gonna write previous and then what I'm going to do is I'm actually going to append this text node to my anchor tag which means I'm actually going to insert this text inside the anchor tag so I'm going to want to grab the new priva ttan and then say i want to append child and append the text node like so so now that we did this the next thing we need to do is we actually need to append the actual anchor tag to the actual documents so what I'm going to do is I'm going to say well we have this container up here which is right now the document body I'm just going to reuse that and then say I want to insert or append append child this new previous button like so then we also want to make sure that this previous button has some attributes inserted inside the actual anchor tag for example a class a none click event because we need to be able to switch image which require none click events so I'm going to copy our sit attribute up here and then say that I want to change or add an attribute inside the new previous button so I'm gonna paste that in instead and say I want to include a class and this one is going to be called IMG - BTN - preview our Evie do this I'm gonna copy/paste it one more time this entire line here and I also want to make sure I include a on click event so on click and in this case here I want it to be called change IMG parenthesis okay now we also need to create one for our next button so I'm just gonna go and copy this paste it down here actually let me paste it at the top there I think that makes a little bit more sense so in between here I'm gonna paste it in and then we're going to change all the places where says priva are gonna change it to next I'm just gonna copy that paste it in here here make sure to change it over inside the actual text note text I'm also going to change it down here inside the variable name inside the appendchild we also want to change it in both places then we also want to change the way we set the attributes make sure it says next inside the styling as well inside the class here and then the last attribute where we have the onclick event we also want to make sure we change it there so you just need to change all the places where it says Priya to next now there is one more thing you need to do here though with these next and previous buttons because we need to know the width of the actual image because not all images are going to be the same width if we were to open up this one you can see it stops right here if I were to open up this one you can see it stops a little bit further out so we need to make sure we get the full width of the image that we want to display in order to know where we want this button to be positioned inside the image here because if we were to go inside my live example or the the finished version you can see the next button is a certain spacing from the image no matter the width of the image and that's what I want to create so we need to get the actual width of the image that is right now loaded inside the browser so what I'm going to do is I want to make sure that I create something called a onload which means that I need to wait for the actual image to be loaded before we run all this block of code down here okay what this this block right here so what I'm going to do is I'm going to say well we have this image up here that we created and paste it in a little bit previously inside the code I want to take that image and I want to check whether or not this image has been loaded by using and unloads events so I'm going to say unload equal to and then I'm going to say I want to eat call a function parentheses curly brackets and then I want to insert all this code we just created for the previous and Next button inside this function here so this code is not going to get run unless the actual image is done loading because if we don't do this we're not gonna be able to grab the width of the image because this code here is gonna run faster than the image gets loaded which means that since the image hasn't loaded yet it's going to set the width of the image to zero if we don't do this so this is a very important step here so after we have loaded the image inside our container we now want to create a variable called image width instead of equal to this object which means this image up here dot width which is a property that we can reference to in order to get the width of an object so we're referencing to this image that is getting loaded and then getting the width of it so now what we're going to do is we're going to get the actual distance from the image to the edge of the browser because when we create these buttons and axis style them we need to tell the styling how far from the edges should the buttons go so depending on how wide damage is they might need to move in further or not as far so what we're going to do here is I'm going to create another variable I'm gonna call this one calc image to edge and then we're going to set this one equal to a calculation because now I need to calculate you know the distance from the image to the border of the browser so what we're going to do is I'm first of all going to take the window width which is going to be the one that we stored all the way up at the top here when we created our first JavaScript code that's going to be the width of the entire browser and then what I want to do is I want to subtract the image width that we just got above here so now that we did this the next thing I want to do is right now I have the complete spacing from the image to the board of the browser both sides and I just need to have it on one side so divide it by two so what I'm going to do is I'm gonna wrap this inside parenthesis and then after the parenthesis I want to divide by two now when we do this the buttons are actually going to be placed right at the edge of the images we actually want them to not be on top of the images but a little bit further out to the side so I'm just gonna go ahead and wrap this around parenthesis again and just for good matters I'm gonna go ahead and include a minus eighty pixel and again you don't need to write pixel behind it because it'll actually mess it up just right minus eighty and then it's going to just move it just a little bit further out from the image there so now it should be perfectly fine so now that we have this we need to take this variable which is the calculation for where we want the buttons to be and add that as styling to our buttons so we go back down to the buttons and I'm gonna start with our next button here and I'm going to say I want to grab the next button and I want to reference to the style property of this button and I want to add a CSS text styling that I'm going to set equal to double quotes now before we create this darling I do think we need to go back inside our gallery that CSS with this to make sense so let's go ahead and go back in there just know that right now we're going to style the buttons that are going to get displayed inside our gallery once we open up one of the images so inside our CSS file what I'm going to do is I'm going to say well this is going to be the next image styling and what I want to do first of all is I want to actually reference to the class called image the - button - next because that's a class we applied using the set attribute method inside the JavaScript - the next button so the next button has this class attached to it then I want to make sure I say display as block because this is a anchor tag so when we display it as block or any sort of text and we display this block we can actually add a background to it by adding padding so this is why I'm doing this and then I want to say petting six pixels from top and bottom and 10 pixels from left and right then I want to add a border radius to sort of smoothen out those corners of the button so it's not completely a square so I'm gonna say border radius set it to something like 4 pixels don't want it to be too round I think there might be too much and then I want to set a background color and I want to set this one to not completely black but something very close to it's a 1 1 1 1 1 1 then I want to set a position and this is why I wanted to go back and do this first because who will set a position and it's going to set as fixed then I want to set a top and I want to set it from the top of the browser I want it to be 48 view height it's going to be where the button is positions from top to bottom you can kind of eyeball that one going down here the next thing we're going to add is the set index because remember we set the actual container to a hundred I want to make sure we set this one to something higher so the set index is going to be 500 then I want to set a font family because we want to style the actual text and I'm gonna set it to Arial again because I don't have any imported fonts and I also want to set a color for this text here it's just going to be white and then the last couple of things we're going to do is we're gonna add a cursor to a pointer I don't think we need to include this to be honest but just let's go ahead and add it in this good Messer we're also gonna set a text transform because I want it to be uppercase so upper case and there we go now I do also need to add a hover effect because I wanted to change once I hover my cursor on top of it so I'm just gonna go and copy it here and say after the path Col 1 harbour and then just sort of teams to your paths and T or something you can change the background color you can do whatever you feel like I'm just going to use opacity to 0.8 now with this styling I'm just gonna go and copy and then just go ahead and paste down this one more time and now I'm gonna change the styling to image button preview and again I just want to point out here that we're actually doing double styling because I'm not gonna be changing any of the CSS inside both buttons here so we are essentially wasting a little bit of styling here we could if you had to do technically correct add a ID to the buttons as well and then have the class as the same name inside both buttons so you could just do the styling one place again you can change that later if you want to it doesn't really matter at the end here so with these buttons here I just want to go ahead and make sure I change the styling names or the path of these different buttons so the the second button is called previous instead of next and now what I want to do is I want to go back inside my JavaScript file because remember we set a position called fixed for these buttons here what I want to do now is I want to take this calculation up here and I want to change the right styling because right is part of the position we styled inside the CSS file and I want to set right to whatever we calculated up here so the way we're going to do that is I'm going to say right and then just right pixel in here and then in between pixel and the actual property we have here I want to say double quotes plus plus and then add in the JavaScript variable by doing this we now added in this number here inside our styling so I'm just gonna go and copy paste what we have here paste it inside our previous section down here so we have the previous bottom style as well and then I just want to make sure we change the new next button to new previous button inside the variable name and instead of right we want to say left we do need to change one more thing here which is I'm going to go ahead and not have a space right before pixels that is something we want to make sure if you don't have otherwise it's not going to work out it's not gonna know that we're calculating pixels then if we don't do that so having done this let's go ahead and go back inside our browser refresh and click one of the images and now I can see we have the button going exactly where they're supposed to be now there is one thing though because right now the buttons don't work and if I were to actually close down the image you can see we still have the buttons here so what we need to do is we need to go back inside our code and we're gonna go inside our clothes image function down here I'm gonna go ahead and add just two more lines of code to close down those buttons there so what I'm going to do is I'm going to copy paste what we have here paste it down two more times and I'm going to say that I want to select a class that is called image or IMG - BTN - next and I want to remove it then I want to copy this paste it in down here and say I want to remove the previous button so now if we were to go back inside the browser refresh you can now see them when I close it we also close the buttons there so now everything here works the only thing is that we now need to be able to change images that's going to be the next part here so what we're going to do in order to change the images is we're gonna go ahead and create a new function down here and I'm gonna go and call this one function change IMG parentheses curly brackets now the reason I called the change image is because if I were to scroll up a little bit you can actually see that when we did actually create these buttons here I did create an on click event called change image and that's why we want to make sure we have a function called that now what I'm will be doing here is I'm going to be passing in a parameter because in order to know whether or not I want to go forward or backwards when I want to change the images you know whether or not we click previous or next I need to pass in a parameter here so going back up inside out button JavaScript code here inside the on click event I'm going to be adding one for going for going forward and zero for going backwards so going back down to my function down here I want to make sure that we include this parameter inside the function so I'm going to say change dr4 direction so this is the variable that is going to contain either a 1 or a 0 depending on which button I clicked so what we can now do is going in here is I want to make sure we first of all before we can change image remove the current image inside our website because when I have something opened we don't want to have this image still here when I add the next image so we need to close down this image first so going inside our code I'm gonna go ahead and say we want to add a we can actually go in copy/paste what we have up here document query lecture and then add a remove method at the end there and what I want to remove is an ID called current - image because that's what we added to the image once we created up here you can actually see that we have if I were to find the image we created it is right oh ok I can see we actually forgot to include that so inside where we created the image right on top of where we actually created the buttons we need to include another set attribute because we do also need to include a unique ID for this specific image here so I'm going to say the new image is also going to it's also going to have a new ID that is going to be set equal to it's going to leave what we have in here just to make sure we don't get anything wrong it is going to be set equal to current - image so now if we go back down to our change image function down here we will now remove the image once we do have to click the button so let's actually go ahead and go and set our website just to test is click an image and then you can see remove damage there going back to our code what we're going to do now is we're going to generate a new image because now we deleted the image and we need to create a new one and we need to do that depending on which image we currently deleted from inside the website so what I'm going to do is I'm going to create a variable and I'm gonna call this one gets IMG window because I want to get the window right now that the images inside of and I'm going to set this one equal to documents dot query selector and I want to select the window that has the class that is called IMG window which again is just a class we added to the container for the image so we're just grabbing that one so we can insert a new image inside of it down below here I'm going to create a new image element so going to say new image and I'm just going to say well actually a lot of this is just copy paste from from above but we're just gonna go and rewrite it again so new image equal to document dot create element and then I want to say I want to create a new image IMT then below here I just want to add the image inside our window or the container so I'm just gonna say get in its window and then run a append child and then we're going to append a new image so now we're going to be adding a new image element but we haven't said the attributes yet because right now it's just an image but it doesn't have any link to the new image or anything so that's what we need to do now now in order to calculate this we need to know two things what was the current image that we just deleted and what is the button that we clicked DV click previously did we click Next because depending on that we need to either get the previous image or the next image so down here I'm going to create a variable to start with and this is not going to be equal to anything because we need this to just sort of be a container and this is going to be calc a new image and we're gonna close that one off then I'm going to create an if statement and inside this if statement I want to know what is change direction so is it one or is it zero because depending on that it is going to either go left or right inside our gallery once we change the image so depending on this one if change dear [Music] equal to one then what I want to do is I want to go inside the if statement and say I want to grab disk out new image we created and set it equal to the get latest opened image which is all the way up at the top here which right now we set equal to one if you click the first image if you click the second image is equal to two so we have that one stored depending on what image were just opens so I want to set it equal to that one and then I want to add one to it because now we're going forward this is when we click the next button so it has to be the next image in line which is going to be the next number after we've done this I need to run another if statements because what if what if the image that I open is the one at the very end because there is no image number eight so what we need to do then is start it all the way over again so going back inside our code we need to go inside this if statement and say well if count new image is greater than the gallery images that we have up here that contains all the images we just grabbed from the gallery dot length which simply says how many images do we have inside this variable up here right now we have seven so if our new image that we're going to be loading in is greater than seven then we need to start it over again we don't want to go to number eight we want to start it over so I'm going to say we want to set calc new image equal to one so it's going to load the first image instead okay after the first if statement here I'm going to run an else if statements because what if I didn't click the next button what if I click the previous button so teens Direction is going to be equal to zero instead and then what I want to do is I want to just simply copy/paste what I have here inside the last if statement and instead of adding one we're going to be subtracting one then I also want to make sure we don't check if calc new image is greater than you know the length of how many images we have but instead if it's lesser than one because if I open up the first image the current image is going to be having a number as one so if I were to go back one it's going to go to zero and we don't want that to happen so instead I want to make sure that the next image that I'm going to load is going to be equal to gallery images lengths like so because now it's going to open up the very last image that we have inside our gallery so now that we did this we're going to go ahead and set an attribute for our images up here that we created because now we know which image were going to load up next so we can actually do that so I'm going to say we have this new image that I created and I want to set attribute and inside the attribute I want to set a source to begin with so the source is going to be the first parameter and then the second one is going to be the path to the actual image so right now I want to make sure I go inside my image folder and then I want to load the one called image and then we need to add the number of the image so I'm going to add a JavaScript variable so going to get the couch new image then I want to add another string which is going to be dot jpg now if you're using anything besides JPEG and images you might want to change this I would recommend being consistent inside your website when it comes to your gallery images don't have JPEGs and PNG s mixed together just sort of stick to one so depending on that you might want to change these you know JPEGs that we have here having theirs we now need to add one more attribute because we need to set an ID for this image set to current image because remember when we delete the image up here we actually reference to there we go we reference to an ID set to current image we had to remove the image in order to insert the next image so we need to make sure that ID is also applied to this new image so I'm going to say we want to reference to the new image and set a new attribute this is going to be ID and then I want to make sure this one says current - IMG so now that we have this what I want to do as well is I want to make sure we update the latest image because remember at the very top here we're keeping track of which image was opened last if this one doesn't update every time we change the image it's going to mess up the whole thing so we want to make sure that we take the get latest opened image and we set it equal to calc new image because that is going to be the index of the new image that we're opening inside what we have here now the very last thing we need to do inside our JavaScript codes we need to make sure we change the buttons and their positions for the new images that gets loaded in because not all images are the same width so if I were to actually save this just to sort of show you open up this image here it's actually not gonna do it because we need to do something here before we can actually show this I did actually notice one more arrow in here which is at the very top of our team's image function this has to be inside double quotes by the way inside the very top where we create the get image window we need to make sure we put this into double quotes so the class image window inside double quotes okay so once we've done this let's actually go back inside the website and refresh if I were to open up one of the images you can see once I change image we change the image but the button stays in the same place and the reason this is an issue because you might think well this is sort of nice then you can just keep switching right you don't need to move your cursor in and out it's a better user experience but the reason this is an issue is because if I decide to open up a image that is not so wide and then change the image you can see now the button is inside the actual images that comes after and we don't want that to happen so when you we need to adjust the actual button positions here so going down inside our code I want to make sure first of all that the image has actually loaded like the new image has loaded up before we start chasing changing the persistence of the buttons because we need to know the new width of the new image so what I'm going to do here is I'm going to say well we want to grab the new image we just created and I want to run a on load event and once it has loaded I want to run a function now in here the first thing we're going to do is we're gonna create a variable called image width and I'm going to set this one equal to this object that has loaded which is this image dots width so this is exactly like we've done before a little bit further up inside the code then what I want to do is I want to run the same calculation essentially so we're just gonna go up here and actually get the calculation we could just a copy these two lines it doesn't really matter and I'm just going to do the exact same thing here now what I want to do is I want to create a new variable and I want to call this one next BTN for next button and set it equal to document dot query selector and I want to select the next button that we have here so I'm going to say I want to look for a class called IMG - BTN dot - next and I want to change the position of it so I'm going to reference to the next button that I just grabbed from inside the website I want to add some styling to it which is going to be CSS text and set it equal to we can actually go up here and actually sort of copy paste as well so let's just go ahead and copy the next one is going to be going to the right so we want to change the right styling to the new calculation we just did here so calc image to edge like so and then we just need to do the previous one as well so instead of next button is going to be previous button and then we just want to reference that right there so now that we did this that's actually going to go back inside our website refresh and as you can see now we have buttons to move it want to close the image we just click on it and now we close it down so this is how we can create a gallery image or gallery image gallery section that can open up images I hope you enjoyed this episode it was very long for me to record I don't know how long the video is going to be but I've been sitting here for about almost two and a half hours so I hope it's not gonna get us long when I edited afterwards but I hope you learned something here at least you learned a lot of JavaScript when it comes to that so with that in mind I hope you enjoyed this video and I'll see you next time [Music] [Music] [Music]

Channel: Dani Krossing

Views: 56,310

Keywords: How To Open Images Using JavaScript, image gallery that can open, javascript image gallery, how to create a image gallery using html, gallery using html, gallery using html css and javascript, html gallery tutorial, javascript tutorial, html css, javascript gallery, Image Gallery Tutorial, javascript, build an image gallery using html, modern image gallery with vanilla javascript, website gallery tutorial, html image gallery tutorial, image gallery that opens when clicked, html

Id: dkLpo4shS6c

Length: 91min 4sec (5464 seconds)

Published: Tue Oct 22 2019