Simple Image Lightbox Tutorial 

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.

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

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

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

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!

awesome greaaaaat contentism but can we add a slider

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

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 ?

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?

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

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.

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') })

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

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?

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

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

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

ny javascript doesn't work

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

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

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

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 ^^

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?

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

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?

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?

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?

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

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

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?

how to open an lightbox with an in it?

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

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!

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

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

This is very helpful. Thank you so much!

Maybe you should mark time step in the description.

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?

bro i love you

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

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!

Where is the code?

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

@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

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.

this is great, very helpful, thank you

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

love U

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

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

good one!

Are you using prettier? Thanks 🙏

Thanks for this one, cool stuff!

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

Superb tutorial as always. Thanks, Kyle!

Thenk you so much! This helped me a lot!

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?

can we build image lightbox with reactjs ???

very well and it worked in my webpage

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

this is awesome tutorial , thank you very much 🙏🙏

Very helpful and easy to understand.

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

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

thanks a lot mate :)

thank you so much, it helped a lot

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

Thanks man you rock!

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!!

Nice :D

U literally saved my life💪

Thanks a lot, Kyle!

Where is ReactJs next tutorial? 😐

Great tutorial. Greeting from Indonesia

Just about to build a light box lol thanks

Really helpfull, thanks a lot.

I needed this thx Kyle :)

1st brother

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