Modern Image Gallery With ES6 Vanilla JavaScript

In this video we will build a simple image gallery with thumbnails and a fade effect with Vanilla JavaScript (NO JQUERY). We will use ES6/ES2015 arrow functions and other features along with higher order forEach and other modern concepts.

SPONSOR: GDP HOST - WANT CHEAP WEB HOSTING?

CODE:

BECOME A PATRON: Show support & get perks!

ONE TIME DONATIONS:

VISIT MY WEBISTE: Check Out My Udemy Courses

FOLLOW TRAVERSY MEDIA:

[TraversyMedia]

As some mentioned, it is a better idea to use event delegation rather than setting the event listener in the foreach. I guess I was hellbent on making the code as short as possible but could be a bit more efficient :( Go ahead and experiment with it...Thanks for watching

[hamzajirah]

I am glad to tell you that I am now a tutor here in my city, Abuja, Nigeria; largely because of your video tuts like this one. God bless you, Mr Brad.

[graybab]

Not too drawn out and clearly put. This is the best tutorial on this I've found so far.

[Deuz_]

Thanks, Brad, you da main man. I'm 30 lost @ life and adulting but I took up your courses and am progressing well. A big thank you for fuelling my fire.

[BalaMuruganKamaraj]

i have been following you for past one month and i found that you are the only best teacher for teaching us web devolopement course just an awknowledgement from india

[olamideabass]

always straight to the point. your contents have made me a better developer from vanilla js to react to laravel php. God bless you Brad.

[ademineshat]

First of all Thank you very much Brad!


//For those who wanted with event delegation:


const current =
const imgs =

imgs.addEventListener('click', (e) => {
if (e.target.tagName == 'IMG') {
current.src = e.target.src;
}
});

[mikettmaher]

Hi Brad, I added the following if statement to check if the current img is the one you've clicked and only applied the animation if it isn't

if(current.src !== e.target.src) {
current.src = e.target.src;

setTimeout(() => current.classList.remove('fade-in'), 500);
}

I love your udemy courses, in the middle of the es6 one at the moment and really appreciate the free content you put on youtube too. Keep up the great work thanks!

[oliverharan]

Thank you Brad, I subscribed to Udemy for your courses.... Awesome stuff

[vivekdhoundiyal]

Thanks man....You are the best teacher with tons of knowledge.

[joelful]

This is what I need and u gave it Brad thank you so much. Your tutorials are my basic building blocks for my career. 😊

[tadakuniyasuda]

OH MY GOD, THE BEST TUTORIAL I HAVE EVER I just need to practice even more!! Thank you very very much!!

[MrWyldWolf]

Another outstanding video. You have taught me quite a bit about code and I'm hoping to get my first job soon. Good luck in the future.

[GmoneyMozart]

Hey Brad, here's something for you to mess around with in case you didn't know. :)

*Increment src and class:*

img.img$[src="img$.jpeg"]*7

*Increment src same class with specificity for class*



*add an alt class*



*stack them individually in separate divs*

[erichjordaan]

Thank you so much for this Brad, have been looking for a good example for simple vanilla js for a slider to fully understand how it works, cause most you find are in jQuery and thus some of the core elements that are 'omitted' (if this is the right word to use here) are left out due the how jquery works.

[yudisthirahadigustianda]

Damn... This guy is so dedicated, thank you very much Brad

[ArfainSyed]

Thanks for the video. I am learn visually and your style of teaching is simple but informative. God bless keep up the good work.

[carterjm]

Brad, this is another great tutorial. Unfortunately right now I am staying away from Grid only because IE can't handle it naturally. I know that is a lousy excuse, but it is actually helping me learn CSS better too.

[ewaevva]

You are such a great teacher, you make it all so understandable. Thank you so much for what you do for us the beginners. Have a very happy Xmas.

[applicationinfo]

It is absolutely crazy that there was a push to take on JQuery without learning your JS fundamentals. I remember some people not even understanding the “query” portion of it haha