Responsive Filterable Image Gallery using HTML CSS & JavaScript

Responsive Filterable Image Gallery using HTML CSS & JavaScript

Responsive Image Lightbox using HTML CSS & JavaScript

Timestamps:
0:00 Intro of gallery
2:58 HTML & CSS start
8:13 Responsive CSS Code
10:24 JavaScript Start
11:21 Making all images filterable (JS)
20:08 Creating fullscreen image preview box (HTML & CSS)
25:59 Function for Image preview (JS)

Music Credit:
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.

[Mostafatusher]

Just awesome. I spent three days for this issue. no plugins and no code was working. Now solved.

[Anonyme]

how do i add more description of a specific item in the preview box?

[chloefinlay]

This was so unbelievably helpful thank you so much!

[sagarbharati]

Thank you so much;thank you for the clear explanation as well. Was helpful.

[yassinebenmustapha]

what do I need to add if I also want to close the 'preview-box' when clicking on the body?

[extremegamerz]

bro i really love your video please a little suggestion add a soft lofi music weare programmer espacially me hate this kind of background music alot please add soft lofi :(

[gerardofranciscosimancasma]

excellent tutorial, one question: what size would the images be?

[witnesssombhane]

HI thanks for the video. How do you add next and prev buttons to the images?

[emir.siriner]

Absolutely gorgeous. Thanks for share... Can this be done in slide form?

[HridoyHazard]

after previewing an image there are no close button/icon to close it.can you check it plz.i downloaded the source file and opened but there are no close button/icon

[kennethchen]

Hey @CodingNepal I am having trouble with closing the preview button. The x isn't showing up and I am not sure what the error is. I have tried messing the the span class with icon fa fa times but for some reason the icon isn't showing in my preview. Is there any way to fix this?

[nirmal]

your Source codes file is not working @
CodingNepal

[AnjuGupta-jylj]

In the same tutorial can u add previous and next buttons i.e
Responsive filterable image gallery with lightbox and prev and next buttons
It is a requested

[omkarp]

Bro...your js seems old version. Because when I was coding(copying you) I get 2 error.
1) you can't use onload function without parameters.
2)In if condition where you used => this sign.
Please give reply

[marylucey]

can you do the same thing with multiple videos?

[akserver]

plz also make reponsive video gallery code

[akshitrana]

Why it gives an error of filterImg.forEach is not a function at

[boringmacho]

nice video brother what if i don't want all in list

[chloefinlay]

Hey! So i followed the tutorial in full and when i put my website live all of the images squished and stretched when viewed on an iphone or ipad? However, it was perfectly fine on android? Would you have any idea why this might be happening? Thank you again for the help :)

[dhananjaysingh]

Bro sb kuch toh accha bs agar image ko preview krta hu or uske bad usko close krna chata hu toh close button ko define nii kiye tm