How To Make Responsive Image Gallery With HTML CSS JS

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

Рет қаралды 134,159

2 жыл бұрын

Learn How To Make Responsive Image Gallery With HTML CSS JS | Lightbox Image Gallery Design Tutorial Step by Step
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we will learn to make an responsive image galley on HTML website, When we will click on any image of the galley then the same image will popup in the center of website and we can also check the next and previous images by clicking on next and previous icons. All image will have captions that will be displayed just below the image.
Download Images: drive.google.com/file/d/1pLD7...
---------------------------------
recommended course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
► CSS Grid Layout Tutorial for beginners:
• How To Create A CSS Gr...
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
----------------------------------
Image credit:
www.pexels.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ KZfaq: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Пікірлер: 165

@Christian.Knight Жыл бұрын

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!

@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

@mikersson Жыл бұрын

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

@yeknafaskesh1257 2 жыл бұрын

Gallery from start to finish - Excellent. Thank you.

@harmonicresonanceproject 2 жыл бұрын

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

@ayanbanerjee4119 2 жыл бұрын

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

@KadriZA 4 ай бұрын

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

@kehcelmacuja1518 2 жыл бұрын

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

@astuces.tech2.0 2 жыл бұрын

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

@mikersson Жыл бұрын

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

@3dmonkeybizz Жыл бұрын

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

@GabeDStudios 10 ай бұрын

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;

@730_diksha_pimple3 2 жыл бұрын

Thank you so much bro. Your videos are awesome

@super-TechCctv 8 ай бұрын

finally i am done these short project very helpfull tutorial

@neets7519 8 ай бұрын

Amazing! Thanks so much it all worked

@willofwingaming2165 2 жыл бұрын

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

@RNPCandCellphoneRepairShop 6 ай бұрын

you really help me alot thank you so much, this one is the video tutorial i needed for my gallery

@AJ-yk9rj 9 ай бұрын

such a great video thank you!

@stefaniacristini Жыл бұрын

The best! Always. Thank You

@GreatStackDev Жыл бұрын

thank you!

@abdullahiayanle2293 2 жыл бұрын

Thanks for posting this video, very useful

@ahmedebrahim3118 2 жыл бұрын

Thank you so much.. More videos about javascript

@kavalisuresh8670 2 жыл бұрын

Thank you bro. Useful

@ascontent12 2 жыл бұрын

I really like you videos sir

@muhammadabdillahasyhar6596 Жыл бұрын

thanks a lot bro, very helpful🙏🙏🙏

@THE_WOLF_-ey9zg 9 ай бұрын

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

@facundogutierrez4747 16 күн бұрын

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

@alexismorales3712 2 жыл бұрын

You made me love they front-end

@shreyafilms8866 2 жыл бұрын

thank you making image gallery video

@sebastiannuary 2 жыл бұрын

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

@sebastiannuary 2 жыл бұрын

@@kniya3467 sorry automatic keyboard

@kniya3467 2 жыл бұрын

👍

@denisdenis12134 3 ай бұрын

Yees my too

@syauqim9878 18 күн бұрын

Very very thankssssss❤

@balazscsanyi3665 Жыл бұрын

Best image gallery for my webpage. Thank you.

@GreatStackDev Жыл бұрын

glad you liked it

@ogundejidavid9366 2 жыл бұрын

Thanks. the video is helpful

@paulomagalhaes6752 2 жыл бұрын

Este tutorial estou adorando......

@mohammadmeraj40 2 ай бұрын

Very nice I liked 👍 ❤️❤️❤️

@super-TechCctv 8 ай бұрын

God bless you dear brother

@nurlanmehdiyev7428 2 жыл бұрын

Thank you veru=y much. You help me

@prasadbagul2146 9 ай бұрын

Very Awesome Video Sir 👍👍👍❤

@franmg2631 Жыл бұрын

thank you so much, this is so helpful

@GreatStackDev Жыл бұрын

Thanks Fran for comment

@doglovers1875 2 жыл бұрын

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

@chase4972 3 ай бұрын

Thanks Boss....

@harshaljuwale 2 ай бұрын

Thank You Bro you helped me !!!!!

@kalicnegr5592 Жыл бұрын

thanks, you saved my grades 👍

@GreatStackDev Жыл бұрын

Happy to help!

@mayankgambhir4312 Жыл бұрын

Kitni pyari image gallery hai😊😊

@michasosnowski5918 6 ай бұрын

Thank you.

@aqsakhan8692 2 жыл бұрын

A big thanks sir

@sarojrajah 9 ай бұрын

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 (>,

@sonamohialdin3376 Жыл бұрын

Very beautiful gallery

@kingmarta1527 2 жыл бұрын

Très bien exécuté

@sahilrehman5565 2 жыл бұрын

Bro which laptop is best for coding

@attilaguba856 Ай бұрын

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

@sonamuhialdeen7866 2 жыл бұрын

Very helpful

@shuvo8959 2 жыл бұрын

You r awesome 😎

@golu998 2 жыл бұрын

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

@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 8 күн бұрын

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

@XSubaruX 9 ай бұрын

u are my hero

@phongthai2838 2 жыл бұрын

vl luôn đầu cắt moi

@abhishek__anand__ Жыл бұрын

Great Video

@puppythirtyeight9431 10 ай бұрын

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!

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

@byAn_INDIAN 9 ай бұрын

thanx brooo

@JeremyGarrettArtist Жыл бұрын

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

@jonasrocha2836 Жыл бұрын

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

@aruproy2983 2 жыл бұрын

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

@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?

@sylasyukale5095 Жыл бұрын

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

@abhijithrnair8248 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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.

@DigitalFringeHub 3 ай бұрын

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?

@RoBerTo89970 5 ай бұрын

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?

@frendiarahman 17 күн бұрын

Can it be applied to React + Vite?

@ahmedserag7072 2 жыл бұрын

why prev and next and close doesn't appear

@ashsummers9034 8 ай бұрын

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

@TJANIMATEDWISDOM 7 ай бұрын

You are exactly like me

@kaanmiracgedik2910 6 ай бұрын

Did you find a solution?

@mcathul5909 6 ай бұрын

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

@sunnyraj2787 4 ай бұрын

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

@pozhilanvicky1243 4 ай бұрын

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

@rajnarayanjoshi1675 2 жыл бұрын

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

@anujmallick4548 2 жыл бұрын

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

@anujmallick4548 2 жыл бұрын

@Md Abu Raihan hope so brother.

@hiwayshoes 2 жыл бұрын

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

@projiz8837 2 жыл бұрын

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

@mavisfromdeaj340 2 жыл бұрын

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 8 күн бұрын

Just use gap instead.

@lithembasolontsi7174 5 ай бұрын

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

@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?

@ltdbd4442 2 жыл бұрын

JavaScript tutorial video, please

@neethug406 2 жыл бұрын

Good img gallery... please provide any good home page image slider if possible..

@ultra-uniq 9 ай бұрын

What is the name of your color theme in vscode?

@JadiRamanathan 7 ай бұрын

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

@mohammadrasheed7891 2 жыл бұрын

How to create a graph and bars animation bottom to up use only html and css

@ramiros5146 11 ай бұрын

The close buttons didnt seems can u help?

@kaanmiracgedik2910 6 ай бұрын

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

@user-lr6ki7jj2b Жыл бұрын

How do i make the other images dissapear when i click on a image?

@emmanuelaohueri3459 10 ай бұрын

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

@dancing-lover4899 Жыл бұрын

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

@lexmark66 Жыл бұрын

epic

@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 8 ай бұрын

Same here