Simple Image Lightbox Tutorial

[@WebDevSimplified]

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

[@ReadyDaddy]

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!

[@toma1610]

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.

[@AtacamaHumanoid]

And the third part where he makes the thumbnails smaller images so it loads faster. And also explains how to automatically generate small images when the client uploads large images into the gallery :) ...but there were some great tips in here I learned from even if the gallery is really only something you could sell on Fiverr.

[@toma1610]

@@AtacamaHumanoid I have all that, I‘ll see how do I upload to github.

[@Smashley127]

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

[@BGP_23]

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.

[@sherifsalah5563]

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

[@WebDevSimplified]

Thank you! Years of practice and debugging definitely help.

[@stevemesser1635]

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

[@FuzzyImages]

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

[@pedrodavi_05]

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

[@reds.webdesign.2966]

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

[@sashaahrens6045]

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

[@EndTimeCountryLiving]

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

[@cudakRS]

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

[@SPOREFAN04XL]

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

[@franciscojunior8066]

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

[@sonoftroy8572]

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

[@WebDevSimplified]

You're welcome! I'm glad you enjoyed it.

[@ostrymiszczu]

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

[@AndyMorrisArt]

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

[@绿叶-t7c]

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

[@LucasFGodoy]

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!

[@rickhorton4955]

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

[@Gormlessostrich]

Superb tutorial as always. Thanks, Kyle!

[@carlonnrivers]

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

[@WebDevSimplified]

I'm glad you found the video useful. I hope everything goes well when you implement this in your own site.

[@davshadou]

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

[@cafe-con-leche]

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

[@richardlugier3659]

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

[@reynaldoramos9564]

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

[@silvercrow289]

Thenk you so much! This helped me a lot!

[@Nathan-ki4qn]

Very helpful and easy to understand.

[@TheNicoya77]

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

[@kaydrum9377]

This is very helpful. Thank you so much!

[@grownmancrying]

Thanks for this one, cool stuff!

[@archaja]

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

[@zachfenton608]

very well and it worked in my webpage

[@MrMihov]

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!

[@susilthapa4367]

this is awesome tutorial , thank you very much 🙏🙏

[@Kerimchaly]

U literally saved my life💪

[@kenzafilali9115]

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 ?

[@zachmurri]

this is great, very helpful, thank you

[@trayhorn]

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

[@valentynakovsanova2185]

thank you so much, it helped a lot

[@myam754]

Thanks a lot, Kyle!

[@nonsolovita]

I needed this thx Kyle :)

[@WebDevSimplified]

You're welcome! I'm glad I could help.

[@abdussamed107]

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?

[@WanderingProphet]

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?

[@DavidAshby1]

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.

[@adamsDevArt]

Thanks man you rock!

[@martinrazakazafy4970]

Good video!

[@rymisoda]

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?

[@soensaid]

semi colons are not needed in javascript and if youre using the prettier extension in vs code then you can change the settings to not add semicolons when it formats your code.

[@juiub]

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

[@Mohamedtarek-qz2zj]

awesome greaaaaat contentism but can we add a slider

[@WebDevSimplified]

You can definitely add a slider if you want. I may cover one in the future as well.

[@ginevrafonteswilliams3987]

@@WebDevSimplified hello, can you please share the code to add the slider? :) you would be a life saver!

[@adritaislam7333]

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

[@sofianghazali8911]

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?

[@wongbejo6647]

Great tutorial. Greeting from Indonesia

[@WebDevSimplified]

Thank you!

[@oblivion6672]

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?

[@WebDevSimplified]

I didn't want to add extra stuff to this tutorial since it was purely about building a lightbox feature and not a gallery. I view these as two different features that many times are used together, but not always. I do plan to cover a gallery at some point though.

[@ginevrafonteswilliams3987]

@@WebDevSimplified Please do! :)

[@haythemsaidi91]

Really helpfull, thanks a lot.

[@WebDevSimplified]

You're welcome!

[@BlueMochi9]

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?

[@keith6658]

I´m having the exact problem ! :( did you solve it?

[@fuchslochtv]

good one!

[@ponding]

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?

[@ponding]

I got what I wanted by applying 0.0 opacity to the thumbnails and creating a background image for each div in question. Just wanted to know if there was an easier way.

[@keith6658]

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

[@AzSaMwEE]

bro i love you

[@matismlr721]

thanks a lot mate :)

[@cocodemongaming8135]

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?

[@maskman4821]

can we build image lightbox with reactjs ???

[@WebDevSimplified]

Of course. Your code will be quite a bit different for the JS but it is possible for sure.

[@Colstonewall]

@@WebDevSimplified I think she wants a tutorial/video for this.

[@WebDevSimplified]

I probably won't do a tutorial on this since the code is nearly identical just with Reqct sprinkled in.

[@income_taxes]

@@WebDevSimplified please do one with REACT!

[@Y2L1029]

Just about to build a light box lol thanks

[@WebDevSimplified]

You're welcome!

[@quentinblanc4326]

Maybe you should mark time step in the description.

[@just_a_sweetpotato]

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

[@taranjeet9]

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?

[@denisrusu1984]

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

[@luberalexanderechavarriabe4156]

@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

[@atheerapeter5174]

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

[@RoshanKrSoni]

Where is ReactJs next tutorial? 😐

[@WebDevSimplified]

It is coming. Those tutorials take quite a bit longer and I have been really busy.

[@RoshanKrSoni]

@@WebDevSimplified no problem 😊 we will be waiting..

[@ruslanlipoduk5268]

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

[@Tassaczek]

Nice :D

[@jefrisaragih390]

Where is the code?

[@ghury1]

how to open an lightbox with an in it?

[@federicovenditti1324]

ny javascript doesn't work

[@learning-from-bs]

Are you using prettier? Thanks 🙏

[@sajidurrahmansahib70]

love U

[@Coding_Asmr_PraDev]

1st brother

[@moonsdonut5188]

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