How To Make Responsive Image Gallery With HTML CSS JS | Lightbox Image Gallery Design

[@Lone.Wolf1976]

Hello Avinash! I have been doing one of your tutorials randomly a day and I first want to thank you for sharing your knowledge with us and providing resources for hte lesson! (images and lightbox code) This kind of tutorial is so helpful to someone like me because it is short and to the point teaching how to make a simple website that looks good and is resposive - for those of us who are struggling finding time between work, family and other duties, a quick 10 minute tutorial code along like this is such a great way to learn and does not overwhelm a work and stress saturated brain with learning coding. I hope I can become a web developer and you are such a great help with your channel! Thank you!

[@yeknafaskesh1257]

Gallery from start to finish - Excellent. Thank you.

[@KadriZA]

Dude you're awsome mate, you're the best, you're the King of "short effective tutorial KZbinrs"

[@mayankgambhir4312]

Kitni pyari image gallery hai😊😊

[@GabeDStudios]

If you add a rectangular photo, it will not align itself right and if you adjust it with by pixels, it will distort the iamge, if you are having problems use with this, use this on you .gallery img on your CSS. object-fit: cover; aspect-ratio: 1;

[@chubbykun]

thanks alot!

[@harmonicresonanceproject]

Really good videos, you have a great way of pacing the coding and explaining piece by piece. Thanks!

[@astuces.tech2.0]

I had an exam today ! This video is a life saver ! Thank you so much dude !

[@sebastiannuary]

Bro you always save my Life!! Thanks so much...

[@sebastiannuary]

@@KuKu45i sorry automatic keyboard

[@KuKu45i]

👍

[@denisdenis12134]

Yees my too

[@mikersson]

Excellent Tutorial!! Thank you so much. Clear and without extra stuff, just what is needed. Thank you again!

[@Mikelscope]

You tutorials have always been very helpful while working on projects. The least i can do is appreciate you for these tutorials. Thanks a lot

[@martinariiteahusson9461]

This was so easier done with your help, thank you so much 😁

[@LiopleurodonJuice]

Thank you! This is exactly what I was looking for and you explained it very well.

[@ayanbanerjee4119]

I always wait for you next video.Your videos are valuable and easy to understand keep making like this I learn a lot from this

[@mikersson]

Again, I was checking the galleriyand it works great!!, Man thank you so much!

[@ascontent12]

I really like you videos sir

[@kehcelmacuja1518]

I really like your tutorials. You're explanation it's clear. Keep it up🤜

[@facundogutierrez4747]

Great video man, thanks for this tutorial ññññ

[@super-TechCctv]

finally i am done these short project very helpfull tutorial

[@THE_WOLF_-ey9zg]

Thank for that) Im frontend student and this video helped me very very

[@ahmedebrahim3118]

Thank you so much.. More videos about javascript

[@balazscsanyi3665]

Best image gallery for my webpage. Thank you.

[@GreatStackDev]

glad you liked it

[@prasadbagul2146]

Very Awesome Video Sir 👍👍👍❤

[@kalicnegr5592]

thanks, you saved my grades 👍

[@GreatStackDev]

Happy to help!

[@willofwingaming2165]

Your way of explaining is osm , thx for that video it's really helpful for me

[@730_diksha_pimple3]

Thank you so much bro. Your videos are awesome

[@neets7519]

Amazing! Thanks so much it all worked

[@mohammadmeraj40]

Very nice I liked 👍 ❤️❤️❤️

[@sandrapitzke546]

Great! Thanks for this video. Nice and easy, perfect !!! In "lightbox.css" I had to change the url of the folder "images" to the place where I saved "next.png", "prew.png" ... Thats all. One question left: Is there any easy way to change the language of the "lb-number"? I would like to change "Image 2 of 6" in "Bild 2 von 6".

[@GreatStackDev]

just add below script lightbox.option({ albumLabel: "Bild %1 von %2" });

[@stevejohns3410]

Mine still don’t work even when I change the url. So I am missing icons on image. Everything else works fine.

[@3dmonkeybizz]

Fantastic tutorial. Thank you so much for this easy to follow process. It is super!

[@muhammadabdillahasyhar6596]

thanks a lot bro, very helpful🙏🙏🙏

[@stefaniacristini]

The best! Always. Thank You

[@GreatStackDev]

thank you!

[@sarojrajah]

sir i am use the same process of your coding and all step by step but when click of gallary in any image then image is moving click next then next and previous then prev but icon not show (>,

[@super-TechCctv]

God bless you dear brother

[@AndersonGonçalvesPinto]

it was perfect thanks

[@GreatStackDev]

You're welcome. 😊 Keep coding.

[@attilaguba856]

Great! But for more dynamic you should use for or foreach loop! Following the DRY concept! Less code same solution 😉😊!

[@sahilrehman5565]

Bro which laptop is best for coding

[@abdullahiayanle2293]

Thanks for posting this video, very useful

[@AJ-yk9rj]

such a great video thank you!

[@SHREYA_FILMS0]

thank you making image gallery video

[@alexismorales3712]

You made me love they front-end

[@doglovers1875]

Please turn on subtitles on the channel videos Thank you very much for the great effort

[@syauqim9878]

Very very thankssssss❤

[@abhijithrnair8248]

I tried this code with 8 other images with same names in this code. But I met 2 problems. 1) here, 4 images are displayed in a row, bt in my result, only 3 were shown in a row. 2) the icons (next, previous, close) were not shown in the web page. Bt its functions worked when I clicked in the respective positions. What went wrong when I tried the same code??

[@pldash33]

I had the same problem too. As for the 3 in a row, make sure all your pics are a good size from the beginning, I did 700px x 680px. Then change the px in the minmax part of your grid-template-columns, he had 250px and when I put that my pics where 2 in a row, I went down to 200px and not they are 3 in a row and I want that. As for icons mine are not showing but work, so maybe cause of the icons themselves. Try new icons with the same name and see if they appear.

[@pldash33]

Got it for the controls. Make sure you put them in an images folder, the server is looking for them in a folder titled images.

[@franmg2631]

thank you so much, this is so helpful

[@GreatStackDev]

Thanks Fran for comment

[@kavalisuresh8670]

Thank you bro. Useful

[@ogundejidavid9366]

Thanks. the video is helpful

[@golu998]

Please make video about career or certificate course about web designing career

[@sonamohialdin3376]

Very beautiful gallery

[@harshaljuwale]

Thank You Bro you helped me !!!!!

[@ashsummers9034]

Everything works for me but I can't see the next, prev, loading and close icons. What do I do? Thanks

[@TJMUM]

You are exactly like me

[@kaanmiracgedik2910]

Did you find a solution?

[@mcathul5909]

I think lightbox.css file image path is not same as your project img path check

[@sunnyraj2787]

Check your css file.and rename the the prev next load etc button.and also check js code name👍

[@pozhilanvicky1243]

S bro i add lightbox. Css in head and change the path and rename it now it was working😊

[@kaanmiracgedik2910]

Hello, I added this to my website, but the icons do not appear. What am I doing wrong? Can you help me

[@FelipeSilva-to3qx]

Nice tip!

[@XSubaruX]

u are my hero

[@jonasrocha2836]

A.M.A.Z.I.N.G 😍

[@nurlanmehdiyev7428]

Thank you veru=y much. You help me

[@rajnarayanjoshi1675]

Hello sir.. Can u please create a front end development course sir plss??

[@anujmallick4548]

Yes sir please. Start a fronted web development course.plz 🙏. N who wants this course plz comment on this. .. Thank you

[@anujmallick4548]

@Md Abu Raihan hope so brother.

[@hiwayshoes]

Yes! From the United States, we would love 💗 to have Easy Tutorials create a front end development course 😀… Cheers!

[@pldash33]

Got it for the controls. Make sure you put them in an images folder, the server is looking for them in a folder titled images.

[@qwerty415]

its still not working on me bro :((

[@shuvo8959]

You r awesome 😎

[@abhishek__anand__]

Great Video

[@ekaterinadergam]

I followed your video and its great but can you help me please, I can't see the arrow and close icons on my images but I can just click on image and it goes to next one...Do you have any idea?thank you so so much!!!

[@sane4959]

I'm facing the same problem too

[@ashsummers9034]

Same here

[@DigitalFringeHub]

I have an issue. The issue is that the previous and next arrow icons are not displaying in the lightbox gallery despite having the necessary files in the correct directory and referencing them properly in the HTML file. Can anyone help me in this regard?

[@kacperswider8291]

I have the same issue

[@TJMUM]

Hello Mr. AVINASH the icons are invisible to some of us What should we do about it? Otherwise saying thank you is realy not enough compared to what you give us

[@carizilla]

In the css code it will say url(../images/prev.png) just get rid of the ../ - that is if the icons are in your image folder

[@carizilla]

Do that for them all

[@TJMUM]

@carizilla it worked... ooo waoooo Thanks very much carizilla♥️♥️♥️

[@TJMUM]

@carizilla what about using it in a big website, then on media queries.....

[@nouman_arshad_0004]

Amazing

[@aqsakhan8692]

A big thanks sir

[@chase4972]

Thanks Boss....

[@arnoldtabane]

Wonderful tutorial, thanks but one question though.....is there a way to reduce the size of the image after clicking because somehow the image fills my monitor entirely? TIA!

[@aruproy2983]

Can you make video on Notice or up coming events section like that

[@sonamuhialdeen7866]

Very helpful

[@RoBerTo89970]

it's all fun and games, until I open the picture in PC display. as soon as I resize the window or open it in an other device (mobile or tablet), the picture is on full size, not responsive. do you have any solution for that?

[@puppythirtyeight9431]

any chance I can send you my code, cos I have a problem with one page that has the lightbox on it and it is a nice distance away from the menu bar, but on another page with more images in the lightbox, it is higher, and cutting off the top of the images. I have compared the html code and css for both pages and they are identical...no idea what I'm doing wrong...thx!

[@kingmarta1527]

Très bien exécuté

[@mavisfromdeaj340]

Is there an alternative to grid-gap? My vs code editor is telling me it's obsolete and that I should avoid using it

[@stevejohns3410]

Just use gap instead.

[@pallavipradhan156]

Hii, everything is working well but the next,prev,close icons are not showing. How to fix that please say

[@SergenteHartman2356]

Hello Avinash. I did the tutorial some weeks ago and it worked. But today for some reason the modal only shows a white background, I thinks its a bug, do you know about any fix?

[@michasosnowski5918]

Thank you.

[@sylasyukale5095]

So I got the the part where I can hover over image 1 and click it but it seems to endlessly buffer?

[@ZKSUNIL]

Legend Watching Exam Day 😅😂❤

[@paulomagalhaes6752]

Este tutorial estou adorando......

[@dancing-lover4899]

I have use your code, it's work fine, but icon are missing like next, previous, close etc...How to solve this?

[@ultra-uniq]

What is the name of your color theme in vscode?

[@emmanuelaohueri3459]

so beautiful. it worked perfectly. but how do I connect this page to my web pages? I'm stuck trying to add it to my pages. I mean, like I want, when one of the menu options in my menu bar is clicked, it opens this lightbox picture page. how do I do that? please help? anyone help..

[@frendiarahman]

Can it be applied to React + Vite?

[@lithembasolontsi7174]

I want to write descriptions on the pop up images,how do l do it

[@simplifiedwithvarun]

Thank You!

[@electronicaentv1975]

Excelente pero mira que lo hice tal cual y no me aparecen los controles

[@projiz8837]

can i use this script on my website or should i have license

[@Mikelscope]

An issue I noticed though is the navigation doesn't always display even after correcting the source of the image and I found an easy fix. Simply put the code below in the lightbox.css file and it fixes it. Hope it helps someone out there. .lb-nav a.lb-next, .lb-nav a.lb-prev{ opacity: 0.4 !important; } .lb-nav a.lb-next:hover, .lb-nav a.lb-prev:hover{ opacity: 0.8 !important; }

[@namankumar4782]

When did you add those navigating and cross icons ?

[@jmv1969]

It was referenced in the lightbox.css code

[@thelostadventurer4684]

he man thanks but for some reason i can see my next icon or close icon i can hover over it but i dont see it?

[@shervicdave5520]

did the image needed to he in the same sizes? what are the solutions if the image is not in the same sizes

[@GreatStackDev]

yes it should be in same size, you paint tool on windows to resize your image

[@chasmboi]

The close buttons didnt seems can u help?

[@ChristianWarrior1]

for some reason the icons do not appear

[@HariniSreeKareti]

Brother we images are white when they brighten

[@pozhilanvicky1243]

I had issue with total number of photos it shows wrongly i was uploaded 12 photos its showing 29 what is the mistake

[@WindsorBurke]

How do you make one image pop up with multiple images in it. I want to make a gallery within a gallery.

[@JadiRamanathan]

Can you share the code with us? I would appreciate that? AMAZING video! Thank u

[@JeremyGarrettArtist]

Excellent tutorial. Is there a way to have a transparent .png watermark superimposed onto the large displayed gallery pics?

[@byAn_INDIAN]

thanx brooo

[@JanetEschenlauer]

Code for grid-template is not working.

[@ahmedserag7072]

why prev and next and close doesn't appear