Responsive Image Lightbox using HTML CSS & JavaScript | Lightbox Gallery in JavaScript

Responsive Image Lightbox using HTML CSS & JavaScript | Lightbox Gallery in JavaScript

Responsive Filterable Image Gallery

Timestamps:
0:00 Intro of image lightbox
2:03 HTML & CSS start
4:43 Making gallery responsive
5:27 Creating img preview box
11:17 JavaScript start
12:18 Showing user clicked image in preview box
16:39 Making previous and next buttons working

Music Credit:
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.

Track: Jordan Schor & Harley Bird - Home [NCS Release]
Music provided by NoCopyrightSounds.

Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)

Track: Lost Sky - Vision [NCS Release]
Music provided by NoCopyrightSounds.

[Jovem-Padawan]

To click outside the preview-box and close it I did it like this, I hope it's useful

shadow.addEventListener("click", function (e) {
if (e.target == this) {

shadow.style.display = "none";
};
});

or this

shadow.onclick = () => {

shadow.style.display = "none";
}

[rabindragupta]

Great to see this amazing talent from Nepal. May you always rise 👌😍

[stefaniacristini]

Thank you very much it helped a lot and thank you for the playlist music, was an amazing choice.

[herbertflick]

Hello Prakash,
your tutorial is very well structured. Your instructions and explanations are clear and I could understand them well. Now I have a nice gallery - "programmed myself". Many Thanks!

[karimnassir]

You are great man, thank you very mutch, since 3 month I search like this toturial

[jayshim]

Many Thanks for your kind instruction!

[sankaranarayanan]

actually, you deserve more subs 51.3k is really low for the quality of content you make

[jaypatel]

Your videos are very helpful for developing skills and knowledge for new learners 🫂🫂🫂, Thank you 🙏❤️

[noortaqi]

hi i have a problem with the const it is on the second line of java script and there is an error saying that it is reserved what should i do i need this for a project ):

[AnjuGupta-jylj]

hey when i am putting display:flex;, it is not working

[toma]

Really nice. Now, how can I add a caption to every single picture dinamically, using variables or for loops. Something like, for every [ i ], 0, 1, 2, 3... belongs a particular description?

[yubiroaster]

Thank you brother This video is very helpful for me🤗💯🇳🇵

[shivamdubey]

Sir just one doubt how can we make two images when in mobile while doing g responsive

[ellem]

would this be difficult to combine with a responsive slider, so that you could hit the left or right arrow and another 6 images would come up but have this same effect?

[aryandoifode]

hii i have a question where can we put the headline in the html code as f i put one it goes in the side

[ujenbasi]

really enjoyed this video keep making love it

[zemozemac]

This is great work, so glad I found this chanel! Can you make tutorial on how to make scrolling tabs with html, css, javascript?

[robertsuarez]

Hi, there’s a problem. The close button and next and previous arrow button is not showing.

[neeleshsharma]

hi Team,

Please help me i am struck in a bug that is whenever I click the images and and press cross btn to return to my web the x-axis shows scroll bar and I tried every possible way that I knew. Please help

[EZHEVNKA]

a scroll appears at the bottom of the screen after the image is closed, how to fix it?