Modern Image Gallery With ES6 Vanilla JavaScript

[@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

[@Beth-q3i]

Thank you very much Brad! but how can we do it with angular ? How could we manipulate the DOM? (maybe be with the shadow dom with@ViewChild), can you make a tutorial about it..i tried the code line : this.current.src = img.src ; in onClick(img) function but doesn't workk :), Thanks a lott!

[@rahbarali4361]

Brad Sir please create a complete social MEAN App tutorial please plz

[@Beth-q3i]

Thank you emotional, i think that's what i did .. I fixed it :), Thank you :).

[@jdalzate7390]

Hi Brad, How do we do it if we need to add a lot of images to the gallery?

[@nartaas809]

Good question. What if I have hundreds of photos with random file names? Do I really have to give source for each photo? I don't really want to add 1000 lines of code just to specify path and filenames. There must be a smarter solution to handle large pool of image files. Could you make a tutorial about that?

[@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.

[@kantyDarius]

i love your comment man, congratulations!!... greetings from Argentina.

[@IlemonaJamesAtuluku]

Which part of Abuja do you reside? I get the notification I watch immediately

[@nathltd]

Congrats man. With love from Lagos, Nigeria.

[@hamzajirah]

Ilemona James Atuluku Garki Area 11

[@IlemonaJamesAtuluku]

Am in Central Business Area, close to church gate... hope we can collaborate on projects... let me know your base (Either Back end, front end or fullstack)

[@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

[@ademineshat]

First of all Thank you very much Brad! //For those who wanted with event delegation: const current = document.querySelector('#current'); const imgs = document.querySelector('.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; current.classList.add('fade-in'); 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!

[@olamideabass5587]

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.

[@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* img.img$.className[src="img$.jpeg"]*7 *add an alt class* img.img$.className[src="img$.jpeg"][alt="Picture-$"]*7 *stack them individually in separate divs* (.div-item-$>img.img$.className[src="img$.jpeg"])*7

[@oliverharan5256]

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

[@erichjordaan8864]

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.

[@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.

[@joel143ful]

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

[@applicationinfo6814]

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

[@vivekdhoundiyal3618]

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

[@jeremywoods1370]

Great video Brad! Thanks!! I love when you comment code and take extra steps to make things more real-life.

[@tadakuniyasuda8214]

OH MY GOD, THE BEST TUTORIAL I HAVE EVER HAD!!!!! 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.

[@mrMinstrel]

Great! I'm currently working my way through your "Modern JavaScript from the Beginning" online course and this will tie in nicely...many thanks!

[@TraversyMedia]

I am thinking of adding this project :)

[@danielstoicamusic]

You should also think about answering questions posted by students in the course. ;)

[@ArfainSyed786]

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

[@yudisthirahadigustianda489]

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

[@atepoc7412]

AMAZING!! This is more than just a tutorial! We are leveraging so much from your years experience.

[@ewaevva4375]

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.

[@ram_pednekar14]

You'r just nailing. I don't understand how could I thanks you. If in future anyone gonna ask me who is you'r mentor and I will like undoubtedly gonna tell you'r name. Heartily thanks.

[@NathanBudd]

Nice new video! I've been out of touch on front end stuff for a while, whilst learning about more back end stuff and improving my PHP (using your content of course!) I'd suggest that when you reference another video that you've done, you link to it in the description, and add a "card" to the KZbin video. Should help increase views. Also, if you mention a VS extension, it would definitely help people like me out if you included the install command, as there are a few "prettier" extensions in the marketplace. Eg, `ext install prettier-vscode`

[@birsingh5388]

W3schools should hire you as project manager to do all their tutorial up to date and more efficient. :)

[@leonelmateus]

project manglers can't code

[@aseemlalfakawma5084]

fuck w3schools

[@noah123180]

I really like W3schhols. I learned all the basics of HTML, CSS, JS, Bootstrap, jQuery from it, But in the JS section I'm slowly jumping off/writing own Code cause they don't use ES6 and got no tutorial for it...

[@h0ckeyd]

@@noah123180 A lot of people recommend the Mozilla library over W3schools today....not totally sure why though, as a beginner it's definitely not as friendly.

[@pixikraft9617]

Hey Brad, nice tutorial. To reset the thumbnail opacity, i would have used the listener transitionend and e.propretyName. I think it's a better way to handle this but your solution require less lines of code so i'm not complaining.

[@JamesYGGoY]

thanks for the video, it was great. I don't think you're taking a dig at jquery or anything, but think one way to say it is that you don't need an extra library, that that would bloat the app unnecessarily

[@rushabhpatel4291]

Fantastic stuff as always Brad.

[@arminasabramavicius7226]

very light and clean. Great job

[@hamidbakhtiari3986]

thank you brad with all you videos and courses

[@animesh4627]

Hey Brad, recently I got to know about your channel on KZbin.. i loved its content.. and the way you teach.. It's always a fun while learning by your videos.. You are doing an amazing job.. May god bless you and ur family... Love from India.. And I will be so pleased if you please guide me with the timeline should I follow for becoming a fullstack web developer... I have knowledge of html, CSS and vanilla JavaScript, what to do next?

[@edwardju1010]

same issue with yours, bro

[@paraglide01]

Thanks Brad great addition to w3schools, love that site. You should do more of these efficienty tutorials.

[@pola478]

I wish you would do more videos like that. w3schools has a good stuff but you right -code there is sometimes to complicated and it doesn't look modern at all but you still can learn a lot of js from their examples so its good to look into it.

[@saidzbiri6247]

You're the best Brad. Go ahead

[@angelheart0212]

Wow!! You're just sharing what exactly I've beeeeee.........n wanted !!! You are awesome !!! Thank you for sharing!! I really appreciate that ! This is tremendous helping !!! Even I don't understand all about coding though, I can still much much easy to understand this tutorial ! I have to set up the photo gallery on my client's EC website though, but I've been searching for how to create and some " SIMPLE CODE" like this. Wow! I'm so happy! I shouldn't have payed bunch of money for online coding school..... Like co**c***my...

[@geeksy2278]

Thank you brad, quality content as always!

[@chimpionboy]

Beautiful neat clean code. Thanks Brad.

[@brentboles1920]

I'm a designer, who is trying to learn javscript. Brad your UDemy class has helped a ton. What's throwing me off in this tutorial is the forEach loop, specifically I'm curios what it would look like if was written with a regular function instead of an arrow function. Curious if anyone could help me with that

[@mattiusbattol]

You beautiful beautiful man. I've been looking for something like this for ages

[@mattiusbattol]

I mean he's just the goddamn man isn't he! best tutor on the internet hands down

[@omarilbuur8383]

Quality stuff Brad, Could you make a video about best security practices making web applications (specially authentication)

[@Avabanks2025]

Great Sunday project. Thank you, sir!

[@jasurshamsiev5334]

love it man, thanks. Can you make "JavaScript can do that !" series pls? P.S thanks a lot for doing it old way and explaining a EcmaScript 2015 way It is really educative.

[@rdonzinc30]

You are such an amazing guy Brad, i just went back to coding again and I’m already way too far 😅 you are an influence 💪🏼 with this project trying to figure out can we apply some text labels on each image that will change as well on each click its more like a multiple function i always see they are using jquery thanks brad

[@ralmslb]

Very cool video. Thank you :) Just don't agree on the overkill forEach to reset the thumbnails opacity. Why not use a pointer/var to the previous thumbnail instead?

[@hakunamata_tuh]

i'am newbie.. so can you show me how this done?

[@ralmslb]

I'm very newbie js programmer as well, so take this solution with a grain of salt in regards to variable scoping, etc But the general idea is there and working. I've marked the new stuff with NEW in the comments. Check it here: codepen.io/Ralms/pen/jYJOZz

[@issam2901]

ralmslb Hy , There is one problem with your implementation : if you click the image twice or more the opacity changes to 1. That is due to the fact that you are assuming that event target will always be different from the current thumbPointer. Adding a condition to the top of the function should solve it if (e.target === thumbPointer) return ; Otherwise your implementation is more efficient and looks much cleaner. gg

[@ralmslb]

Yeah you're right. I've updated the codepen.

[@mariocarnival]

Nice! However, I suggest you to please, make a part 2 including controls like arrow left and right, captions for pic title, description, option for water mark and so on. Yeah, I will try to implement that with CSS.

[@internetexplorer7880]

He already made plenty on that

[@afandir]

simple, clear, clean, thank you

[@carljeffersonbulatao9582]

Hi, I just want to ask if how can I manage to put that same class like "container" in same page then they are both functional? I mean, two the modern tab gallery in the video, in the same page.

[@kimanje2patrick290]

You are a great teacher. Thanks a lot for this

[@michaelvexler]

you are more than life saver

[@jonathan2715]

thanks a lot for this great tutorial, you made it very easy for me, congratulations.. keep doing this great work!

[@VickyRomyata]

hello, i am so gratefully for your tutorial i did learn with your video thank you very much Traversy Media.

[@VickyRomyata]

i am from Indonesia Success For You............

[@yudisthirahadigustianda489]

Ane dari indonesia juga mas...

[@kamrankhanofficials]

i just want to ask if this tutorial is for the same size of images u used or it may be applied on any size of images..

[@petsimk]

Excellent image gallery tutorial!

[@barneysmith]

Thank you, great Video. Also great hint with pexels. Maybe you can make a Video about PHP with composer and how to bring a composer project to a production system.

[@StackLearner]

great explanation..

[@YogeshYadav-tk9bh]

SIR, Please add a small video recording of your's inside what you upload like you did so many times before, you look awesome while elaborate about what u uploaded.

[@nikhiljindal4580]

before we removed the fade-in class using timeout , shouldn't it atleast happen for all the pics atleast once and not just for the first pic?

[@denyskiparenko1694]

Thanks Brad! Your tutorial is really awsome! Continue making such wonderful videos. I'd like to see more new useful features in JS.

[@SalmanAGhani]

Thanks. I really learn alot from your videos.

[@Uncaught_in_promise]

I was wondering if I can incorporate this vanilla js code into common.js (which is in jQuery) from my current project?

[@topollor6470]

This vedio was very helpful. Please do a crash course on this JavaScript please.

[@ConquerJS]

Sweet example to get started! But you're not concerned about having the full size image load in each thumbnail?

[@julian.castro18]

Great tutorial. Shouldn't we be using actual thumbnails, as in small resolution images for every element in the div .imgs? If the gallery was just part of the website, we'd be loading 8 full res images from the very beginning, and the user may not even be interested in clicking on any of them.

[@jasurshamsiev5334]

thanks a lot. You are so incredibly easy to understand.

[@albertgalvez2556]

Brad3CSchoolin', Thank you sir.

[@euancorbett1582]

Love your guides! You mind telling me what editor you're using there. Or maybe you have a video on tools like that?

[@filip7929]

I would like to say that there is a small problem when you click on the whitespace between the image indicators, black image is displayed. Thank you for the tutorial you are the best btw

[@OGBhyve]

This is awesome! Could you do an image slider next? I generally think there's a lack of before and after image sliders that look good (I found just one that I liked and they used jQuery).

[@LTTheReal]

this is great, an idea how I could make the thumbnails the same size if they're originally different dimensions? I'm making a site for someone as a personal learning project so I'd like to know how to make these custom images presentable. Thanks again dude, you're the man!!

[@SogMosee]

I always convert the node list returned by querySelectorAll into a normal array using es6 destructuring so I can use array properties like .length: const imgs = [...document.querySelectorAll('.imgs img')]

[@marcosgalaviz4904]

wow very nice, helps me a lot! thanks!

[@nenojay6832]

could we use the (Current.ClassList.toggle()) To add the class instead of the (setTimeout()) function with the (ClassList.remove()).?

[@wolfgangr.3268]

3 lines of JS-code and the gallery is functional! But is it userfriendly. I miss a nextImage snd a zoom button. How many additional lines would that be?

[@ThiagoTAV]

Fantastic tutorial, as always!

[@citizenbobx]

As a newbie to JS, this is sort-of what I'm looking for, but I'm wondering if there's a way to have the selected images appear as a lightbox-modal rather than in an area that's visible by default? I did see the other demo you had about creating modals, but that approach isn't scaleable to a large number of images, is it? Another question I had is whether I can use flexbox for the layout instead of grid. Is there any reason that shouldn't work?

[@fvgoya]

Thank you Brad!! Really cool!!! Is it possible teach us too how to do a slider with that dots telling which image is selected?

[@tbx2150]

exactly what i was looking for. thanks

[@ahmetomer1759]

Thanks a lot Brad you're the best!

[@Colstonewall]

You the man, Brad!!

[@philipkraus243]

...so when one of the images in the galery is in portrait, it sets te height of the whole thumbnail row to its height, leaving a whitespace under the other (landscape) images in that row. Can someone tell me a good (and also responsive) way to fix that? I've tried out some things but it wasnt really satisfying... Thanks in advance!!

[@evgeniya.m.46]

Great stuff, thank you! but It doesn't work with older version of IE browser. If there is a solution for it? Some people don't update browsers

[@EightSixx]

mine grid didn't work :'( What am i doing wrong?... I missed the damn , in the css ".main-img img, .imgs img What do i do to make everything look symmetrical if i don't have the same size images for the gallery...

[@skillfulactor09]

hey nice, video love this but there a new application called mongodb compass, its similar to the command line mongodb I was wondering if you can do a video on it its more of a gui interface based and that would be lovely if you can. Love your videos and always learning keep it up stay blessed =)

[@lardosian]

Great tutorial Brad. I'm guessing that whenever possible we should make sure all our source images are of equal dimension, as opposed to setting the size in css. Or is either method ok, thanks anyone.

[@piwozero]

Hi, i want to create multiple galleries. How can i trigger e.target.src to this certain class="imgs" sibling,which is class="main-img"and grap img and change src ?

[@slapiinf518]

Excellent video, for more videos with React and vanilla js

[@jim.....]

this guy knows his stuff

[@arunjiid]

thanks Traversy media.

[@dogafincan]

Thank you. Just what I needed :)

[@techRadiants]

"Floats and clearing them....and all that craps" man sometime i laugh soo hard while watching your videos

[@noibiolamilekan3501]

What is the name of the extension that add column to the end of a statement in CSS?

[@bobbypaycheque]

What changes can be made to this so it will work in multiples on a singe page? For example if I want to have three separate galleries on one page.

[@DavidFregoli]

You would have to have a container like .gallery for each one, then cycle through those and put the current code inside the loop with some changes, like, you can't use the #id selector for current, and the imgs list will have to be queried starting from the .gallery, not the document

[@alancourtney476]

There are many Prettier extensions, Which one did you use ?

[@jasurshamsiev5334]

sorry Brad, have you got anything on async functions I just can't seem to understand them that well, Thanks a lot.

[@tomvito]

Hey Brad, thanks for this helpful video :) Do you think jQuery is overrated?

[@vice2381]

Awesome tutorial. Do you think I can use this great gallery, but associated with images loaded from a mySql table?

[@ioannisme7495]

amazing simply and clean...

[@dirtlocker]

Thanks Brad

[@Shahid-zq4kh]

insteadof remove fade-in using timeout. Can’t we use toggle class