Modern Image Gallery With ES6 Vanilla JavaScript

[Music] this video is sponsored by GPD host they offer a variety of affordable hosting plans with flexible billing cycles these plans include a free ssl certificate a free domain name website builder and many other services including free website migration with no downtime to find out more visit GPD host com or click the link in the description below hey what's going on guys so I have a little Sunday project for you we're gonna build a vanilla JavaScript image gallery slider with thumbnails alright so basically we have a large image here and then down here we have some thumbnails we're using grid CSS to line them up and you can see that whatever selected has the opacity effect if I click another image it'll fade in and we're going to use a tiny bit of CSS for that effect all right now 90% of the examples you're gonna find on the internet for something like this are gonna use jQuery and it's really unfortunate because we don't need jQuery for most things that it's used for in my opinion I think that it really prevented a lot of people not so much now because people are really catching on that that's not the way to do it but a few years ago it really prevented people from learning actual JavaScript so I would have people on more than one occasion ask me if they should learn jQuery or JavaScript first which is a little nuts you shouldn't learn a library of a language before knowing at least the basics of the actual language so I'm gonna show you how to build it in vanilla JavaScript now the other 10% of tutorials online that use vanilla JavaScript are just I wouldn't say bad code I just say less efficient then it could be one of the examples is w3schools which i think is a great site for learning it actually taught me a lot about JavaScript CSS HTML but I think they really need to update some of their code or at least add new examples that use more modern JavaScript there's no reason to use all the images he and all of them here just have a single image where you can change the source attribute when you click on one of the thumbnails there's also no reason for these multiple functions they should use query selector instead of get class name that way you can use a higher-order array like for each array method I should say like for each instead of these four loops and you can just make this a lot shorter and a lot cleaner so that's what I want to do and I don't mean to pick apart the code here I don't like people that really dissect other people's code and just trash it and that's not what I'm doing this is actually very fundamental stuff like learning variables and in for loops and I do think you should learn selectors like get elements by class name even though the stuff is older I think you should still learn it but I also think they should put a like a newer version as well all right so but then again that takes the job away from me so that's what we're gonna do we're gonna build this in a more efficient way than this version here and also add the fade effect this doesn't have the fade effect I actually boiled it down to two lines of code to build this without the fade effect and without the opacity here so I'm going to show you that as well I'm using es6 arrow functions things like that all right so let's jump into it guys no more negativity and I don't mean to trash jQuery or w3schools just I'm just trying to give you an idea of why I made this video all right so let's jump in all right so to get set up here if you're gonna follow along and you want these exact images you can go to pixels comm which is a great free stock photo site and just search for the word Tek and that's pretty much where I got well that is where I got all of these images and if you want to grab the same exact size you want the large which is the nineteen twenty by twelve eighty in this case 1279 but that's fine alright so inside here in my vs code you can see I have a folder called thumb gallery and inside the IMG folder I labeled the images IMG one through a okay and then I just have a blank index.html mein Jas and style.css so if you want to follow along just go ahead and get that set up all right so we're gonna start off with the HTML as usual so let's throw in our Emmet exclamation and then hit tab and we get our head and body tags so in here I'm just gonna say thumb gallery and then let's add our CSS so we're gonna add style dot CSS still spelt it wrong alright and let's add in our main J s down here so say script source and it's gonna be main dot J s alright so we have our files linked now for the mark-up it's gonna be very simple I'm gonna make it much neater than the w3c which is this here pretty ugly looking and I don't mean to sound like demeaning or anything like that I'm just trying to show you guys a better way to do this so let's create a container and let's create a class of mein - IMG and then in here we'll create an image tag I'm gonna give this an idea of current and we're gonna set the source to the first image so it's an IMG and then it's IMG one dot JPEG alright we don't need the alt okay and then what we'll do is go under the main image div and create a class called images or IMG s and then what I'll do is grab this and let's paste that in but let's get rid of the idea of current you don't need that I just want the image and then we're gonna just copy this down so we'll go ahead and just put an eighth of these so that's four five six seven eight and then let's just change the image name so that'll be eight seven five four three two and one alright and that's it that's our HTML so you can see that that is pretty neat compared to this here and this there's I don't know why they did this with the multiple images at the top what we're gonna do is just change the source through JavaScript of this one image tag alright so let's open this up you cannot go ahead and open up the HTML file or if you're using vs code and you want to install live server you can do that and then you can just open with live server alright so this is what it'll look like it'll just be all the images the first one's gonna repeat because that's the main image here and we have it in the list here alright so let's move on to the CSS which is also going to be very simple we're gonna start off with the body tag alright so the body I'm just gonna add a margin of 20 pixels and we're gonna add padding of 0 I'm also using prettier which is a great vs code extension if I save it'll go ahead and format my code whether it's CSS or JavaScript HTML if I leave off a semicolon by accident and I save it puts it right there you see it move the bracket up as well highly recommend it so it's the background we're gonna set to dark gray alright so the container which goes around everything I'm gonna set a max width of 760 pixels and you can change some of this stuff if you want and let's add a margin Auto to move it to the middle I'm gonna give it a border of white solid and what do we want three pixels and then the background of the container will also be white alright save that so here we're gonna do the main image image okay so the image inside of that class and I just want to set that to a width width of 100% of its container so you can see that now it's fit it fits inside of its container which is 760 pixels we also want the images images to be with 100% so let's go ahead and say class images is image set that to a hundred percent as well okay now the images class is actually going to be a grid so we're gonna add in dot images and we're gonna set the display to grid all right just doing that it's not going to change anything we need to add our template columns so let's say grid template columns and I do have a crash course on grid CSS if you if you're interested what I want to do here is have four four images per column so to do that we could do one fractional for x so one F are like that so we could do that and save but there's a shorter way we could do this and that's by using repeat so we could say repeat four times one fractional like that alright and that will give us the same result now to add some spacing in between these images we can add a grid gap I love grid CSS is fantastic so we could set this to let's say five pixels and save and there we go all right I think grid CSS is one of the best technologies to come out in the last decade it's just makes things so much easier instead of doing floats and clearing them and all that crap so that's it for the CSS we will add a fading class later with a little bit of animation for the opacity for the fade in but we're gonna do that later so now we're gonna jump into the main j/s and from here we're going to grab the current image so we'll set that to document dots we'll use query selector and that has an ID of current okay and then we want to grab all the images now since there's more than one we're going to be using query selector all all right and what we'll do here is it's basically like using jQuery as far as selectors go let's say dot images class and then all the images inside so now what we want to do is we want to add an event listener on each of these images now query select are all returns what's called a node list which is basically like an array works like an array so we actually need to loop through these images and then add the event listener onto each image so since node lists since query selector I'll returns a node list we can actually use the higher order method of for each instead of using just a for loop so we can do exercise should be images so we can do images dot for each and in here we could do a callback function like that but I'm going to go ahead and use an es6 arrow function so we're gonna say image and we're gonna set this to image dot add event listener and then in here we want to listen for or click okay and then the second parameter we could put an arrow function as well and I'm gonna show you a really short way to do this we could just say current current which is our variable for the the main image the current image we're gonna set that source attribute we're gonna set that equal to and this should have an event passed into it I'm gonna set it equal to that event dot target dot source okay so just this should actually give us the the thumbnail functionality so I'm gonna save and now we'll go over here and we can actually change the images all right now you'll see that prettier I'm using the prettier extension for vs code which formats on save but this could actually be one line of code if I were to make this bigger so it could be one line of code right and then if we wanted to we could also use es6 d structuring for our variables so we could say Const and then inside of some brackets and I'm not gonna leave it like this I'm just doing it to show you guys how short we can make this so we could say current and images equals set that to brackets and then we could take this put that in there take this and put a comma here put that in there and go ahead and get rid of that and now we have two lines of code okay when I save it it goes it goes to this because in Auto formats but you can you saw that it could be two lines of code and it still works okay I'm not going to use destructuring though I just wanted to show you guys that real quick all right so we're gonna go back to this and let's just make this smaller again and instead of just pointing our using our arrow function here I'm gonna use I'm gonna create a new function so we're gonna replace this with a function called image click OK and then we'll create that function here so I am G click and that can take in an event parameter and then we're gonna do the same thing we just did we're gonna take the current source and we're gonna set it to e dot target dot source okay and that should still work let's go ahead and test it and there we go all right so let's take care of the opacity when I click on an image I want it to be kind of faded out so up here I'm going to set a variable for the opacity and I'm gonna set it to 0.4 by default all right and then we'll go down here and after we change the source actually let me just put some comments in here we'll say change current image to source of clicked image and then we want to change the opacity to whatever the variable is - VAR will say opacity VAR so to do that we take the e-dot target and we want to take the style and the opacity and set it equal to whatever that opacity is so let's save that and now if I click on the computer image you'll see that now it's lighter now the problem we have is if I click on another image if that opacity changes but the computer is still left like that and it's just they're all going to stay like that so what we're gonna do is at the beginning of our image click we want to reset the opacity of all the images so to do that we're just going to take our images and we're going to for each and we're gonna take image and we're gonna set that to image dot style dot opacity and just set that to 1 okay so that will reset it on every click so if I click that and we see the opacity if I go to another one it resets it sorry about my son yelling upstairs it resets it and then it sets the opacity to the level just for that single image okay so that is that functionality is covered now the final thing we want to add is the animation and you can see I'll need this code is so for the animation we're gonna go to our style CSS and let's say fade-in animation so we're just going to create a keyframe here so we're gonna say at keyframes and we're gonna say fade in yeah we'll do fade in like that and we just want to say to and then we want to set the opacity to 1 okay and then we just want to have a class called fade in will do fade - in and set opacity to zero and then just call that animation so we'll say animation fade in and we'll say 0.5 seconds so half a second and we'll ease in one and we'll say four words all right and that's it that's our CSS animation and the four words is just is the fill mode property which it's basically gonna make it so the element retains the style values that's set by the last keyframe but that's it that's all we need so now what we're gonna do is go back to our java script and when we click on an image we're gonna add that fading class to the current image okay so let's go let's see we'll go right here after the source changes and let's say add fading class so we can do that by taking our current image and just saying class list dot add that'll add a class and we want to add fade in/fade - in so let's save that let's click on an image okay so say current class add fade and I save this no I didn't okay so let's say I'm just reload this and click now only the first one fade it in did you see that if I reload and I click it fades in now the reason it's not working on these other ones is because the fade in class has just stayed on on this and the animation is only going to happen when the class hits when it actually gets that class and it already has it so it's not doing the fade in so what I came up with as a solution to use a set timeout and remove the class in a half a second after we click it alright so I mean there's other ways you can do this I just figured that this was a nice solution so we'll say remove fading class after 0.5 seconds so all we have to do is say set timeout and that's gonna take in a function we'll use an arrow and we're gonna say current dots class lists just like we can do add we can do remove and then we want to remove the fading class so fade dash in and then the second parameter will be the length of time I'm gonna say 500 this is in milliseconds so 500 milliseconds is a half a second alright so let's try that we'll save so that fades in click the next one and even if I do it real fast it works okay now the last issue that I just realized I didn't do is when we first come to the application I want the first image to be to have the opacity so we can easily do that by going up to the top here and just we'll say set first image opacity and we'll do that by saying the images we want the first one when we use query selector all we get a Dom Dom list back we can use we can select the images like an array so we want the first one and then we're just going to set the style well don't need to do that style dots opacity and we'll set that equal to that opacity variable which I'm going to make a little lighter let's do six and save and now you can see the first one has the opacity if I click on the next one gets the opacity the fade works and everything is good alright so again if we look at this JavaScript here in my opinion at least it's nice and clean and it looks much better than what they did here all right and please don't take this as a dig at w3schools there it's a great site it's one of the for learning at least based in the basics of JavaScript HTML CSS but what I'm trying to do is just show you that JavaScript has evolved and we can do things in a much cleaner and easier way and we also don't need jQuery to do something like this even with faden's and so on I mean the CSS is easy enough it's a couple lines so thanks for watching guys hopefully you enjoyed this and I will see you next time hey guys I just want to mention our sponsor GPD host so if you're looking for affordable fast and quality cpanel hosting look no further they offer many types of packages that include a free domain name free ssl certificate a website builder and more all hosting plans are completely managed and easy to work with you also get automatic weekly backups so whether you have a website to transfer or you're building it from scratch GPD host is a high quality solution to learn more visit GPD host com or click the link in the description below

Channel: Traversy Media

Views: 84,826

Keywords: javascript image gallery, javascript slideshow, javascript slider, es6 image gallery, jquery, javascript, jquery image gallery, jquery slider

Id: afoxd5b0bJo

Length: 22min 36sec (1356 seconds)

Published: Sun Jan 21 2018