Join the Discord server to help influence future video topics. discord.gg/7StTjnR

I look forward for the second part. How to add arrows for next a prev, the X to close the main canvas image and how to add title an caption to each image.

I've been sifting through MANY lightbox tutorials, and yours was the one that got me to successfully create one! Thank you so much!

Wow, there's at least 50 "image gallery" videos i've seen in last few hours, mindlessly searching to find something that can help my project but no video helped, literally everyone BUT YOU is doing something very niche that can't really be used for already existing projects. You are a light in the darkness, simple and VERY CUSTOMIZABLE!!! Love it man, big respect!

Lifesaver. Thank you! I had also my logo and other images pop up in the lightbox so I gave the respective images that I wanted to target a classname "lbimg" and targeted them using const images = document.querySelectorAll(".lbimg") For anyone looking for the code: CSS: #lightbox{ position: fixed; z-index:100; top:0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); display:none; } #lightbox.active{ display: flex; justify-content: center; align-items: center; } #lightbox img{ max-width:90%; max-height:80%; padding:4px; background-color: black; border:4px solid var(--font-color); } JavaScript: const lightbox = document.createElement('div') lightbox.id ='lightbox' document.body.appendChild(lightbox) const images = document.querySelectorAll("img") images.forEach(image => { image.addEventListener('click',e => { lightbox.classList.add('active') const img = document.createElement('img') img.src = image.src while(lightbox.firstChild){ lightbox.removeChild(lightbox.firstChild) } lightbox.appendChild(img) }) }) lightbox.addEventListener('click', e => { if(e.target !== e.currentTarget) return lightbox.classList.remove('active') })

Absolutely excellent teacher! Thank you and keep up the good work.

Your solutions for those two bugs are genius .. you always amaze me.

Awesome! Now all I need to do is figure out left-right controls for the lightbox. Thanks!

I'm not sure why this was so finicky when it came to joining it with bootstrap elements, but once completed they suddenly work, so thanks very much, big life saver ^^

Thank you, Web Dev Simplified! The image gallery for my new portfolio website is now ready to go!

Thank you so much for sharing this, I am learning front end and this was a perfect explanation to help me with a class project. Don't let it be said that old dogs can't learn new tricks...lol I am 50.

That is super awesome Kyle. I really like your style of doing things. Simple, clean, and concise code.

This allows me to possibly make changes to my code, I really appreciate this lightbox tutorial thanks

absolute legend, this really got me to understand lightboxes thanks so much

unbelievable, your channel of youtube is good of season, congrants man and continuos walk!

very easy and simple! I could easily adapt to my testing page. I wonder, however, if it would be too complicated to add previous and next buttons? good job!

is it possible to add feature that allows use arrows on keyboard to scroll through images?

Very clear, cool stuff. I will recommend your video to anyone who is looking for nice lightbox tutorial, thanks !

You are a teaching master! light and easy understand! Thank you!

Wow!! Very, very good!! Thank you from Brazil my brother. ; ) You are awesome!

Cool, all i need to add is just next and previous button. Thanks

Thank you so much, im having super fun with your tutorials 👍👍👍

Thanks for a great video. How can we make a description appear in the lightbox with the image?

Wow this seems very simple and a cool idea! I can definitely use this on my website when viewing user's profile pictures or images in messages!!

Superb tutorial as always. Thanks, Kyle!

C'est un tuto très bien expliqué et assez simple à mettre en oeuvre. It's a good tutorial and i appreciated. Great

Thenk you so much! This helped me a lot!

This is very helpful. Thank you so much!

Thanks for the interesting and helpful tutorial. Is there a way to add a swipe capability? For example, if you swipe left or right on a touch device or use the mouse/arrow keys to transition from one image to another. Thanks

Very helpful and easy to understand.

Thanks for this one, cool stuff!

very well and it worked in my webpage

Numero 1! Thanks a lot! Everything simple and clear, hands-down the best dev-tutor imho. You made me uninstall wordpress and remake my portfolio with code. Do you plan to make a similar tutorial but for embedded youtube/vimeo player in a lightbox. I've managed to make it work just by following this tutorial and a codepen but I am super curious how you'ld do it from skratch. Thanks again!

this is great, very helpful, thank you

this is awesome tutorial , thank you very much 🙏🙏

Nice ! I have always wanted to do this, now I should also try to think how to implement it in react. :D

Thanks for this fantastic tutorial! It helped me out a ton. Are you using an extension that allows you to skip semicolons at the ends of lines in your JavaScript?

Thanks man you rock!

good one!

thank you so much, it helped a lot

Why do we need to add listeners to each image instead of set one listener to the div using delegation?

Thanks a lot, Kyle!

U literally saved my life💪

Hey, this tutorial really helped me understand it better than my tutor did at university. however, mine isn't responsive, how do I fix this please anyone?

I needed this thx Kyle :)

Great tutorial and works a treat. In a reply to someones comments you said you may consider doing a gallery with next and back buttons on the lightbox image, have you done one or did you decide against it? I would just like to add next and previous buttons to the image but from the research so far, I would need to start from scratch. Surely there is a way to add in this feature using the code you have given in this tutorial? Thanks again.

Thanks for sharing. Would it be possible to load this gallery inside an but enlarge the image to Full-Screen size (100% of browser viewport) once clicked? Does someone have an idea?

i want to do the same thing though i want to select all elemnet with href that finishes with jpg in the document i did this let links = document.querySelectorAll('[href$=".jpg"],[href$=".mp4"]') yet i have errror saying that "links " is not defined where is the probleme ?

bro i love you

Hi! Would really like to work this out, but as soon as I put

At 9:20 what and where does the "e" in the event listener come from?

thanks a lot mate :)

awesome greaaaaat contentism but can we add a slider

Thank you so much for this great tutorial. Now, my gallery is a bit different from yours. I'm not using the tag. Instead, I'm using background-image. I made a div with a class name, and with that class name I made a selector and then .className { background-image: url("images/imageName.jpg") }. Because I'm not using , I'm not using src, so img.src = image.src won't work, would it, when trying to get images for the Lightbox? And another thing, it's great that you're able to style the image on Lightbox, putting a border around it and whatnot. Is it possible to put captions underneath the image when it's on Lightbox?

how to make the selector for only the images inside the grid?

Really helpfull, thanks a lot.

Спасибо большое. Выручил

How to use it in Vue js? Why it doesn't work in my vue application😭😭😭😭😭😭😭😭

Great tutorial. Greeting from Indonesia

hello im curious, how do you add figcaption to the images?

I tried implementing your tutorial. After clicking on first image, it works fine. However, when I do it for the second and third, the webpage becomes unresponsive. Any ideas on how to fix it?

I dont think i'll ever be able to learn what he teaches. I am so distracted by his face. 🤩

Can You Make Few Videos? I Have Some Ideas and Needs Help. 1. How Can i Create a Blog using HTML/CSS/JS etc Without WordPress. But Similar. i Have 150+ Posts and How Can i Add Them Easily? 2. How Can I add Schema in WordPress or HTML Website Manually? Or How to Add Schema Manually which Yoast SEO adds Automatically?

Great tutorial! But I don't get the Lightbox part to work :(

Just about to build a light box lol thanks

What if the image you are attempting to load into the lightbox is a completely different image? For example, the thumbnail is 300x300 but it's lightbox image is a 320x720?

I typed in everything word for word but it's not working! What do I do, like I got my images in a grid but that's about it when I click on them nothing happens. Do I need to add a jquery cdn or something?

Why didn't you make it like a full-on gallery? Where you could go to the next img and prev img. Next video maybe?

Maybe you should mark time step in the description.

Nice :D

@t Hi Kail , I have learning from your videos for a while and they are so good. I just wanted to share what i did with next.js which has similar functionality to what you do in this video . Maybe it could be handy for someone

thankyou from stambul you thich wery good you know how can stay junior js deweloper

can we build image lightbox with reactjs ???

could've just done e.currentTarget.innerHTML=" "; in the lightbox event listener to clear images out of it

Where is the code?

love U

how to open an lightbox with an in it?

ny javascript doesn't work

Are you using prettier? Thanks 🙏

Where is ReactJs next tutorial? 😐

1st brother

var blue stinger guy = "web Dev Simplified"{ function Give like console.log(isAwsome); }