No video
How To Make Responsive Image Gallery With HTML CSS JS | Lightbox Image Gallery Design
Рет қаралды 138,675
Күн бұрын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.c...
---------------------------------
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
👉 easytutorialsp...
-------------------------------------
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)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ 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
@Lone.Wolf1976 2 жыл бұрын
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 2 жыл бұрын
Gallery from start to finish - Excellent. Thank you.
@GabeDStudios 11 ай бұрын
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;
@sebastiannuary 2 жыл бұрын
Bro you always save my Life!! Thanks so much...
@sebastiannuary 2 жыл бұрын
@@kniya3467 sorry automatic keyboard
@kniya3467 2 жыл бұрын
👍
@denisdenis12134 5 ай бұрын
Yees my too
@astuces.tech2.0 2 жыл бұрын
I had an exam today ! This video is a life saver ! Thank you so much dude !
@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
@KadriZA 6 ай бұрын
Dude you're awsome mate, you're the best, you're the King of "short effective tutorial KZfaqrs"
@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.
@ascontent12 2 жыл бұрын
I really like you videos sir
@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; }
@attilaguba856 2 ай бұрын
Great! But for more dynamic you should use for or foreach loop! Following the DRY concept! Less code same solution 😉😊!
@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
@facundogutierrez4747 Ай бұрын
Great video man, thanks for this tutorial ññññ
@kehcelmacuja1518 2 жыл бұрын
I really like your tutorials. You're explanation it's clear. Keep it up🤜
@harmonicresonanceproject 2 жыл бұрын
Really good videos, you have a great way of pacing the coding and explaining piece by piece. Thanks!
@mikersson Жыл бұрын
Again, I was checking the galleriyand it works great!!, Man thank you so much!
@RNPCandCellphoneRepairShop 7 ай бұрын
you really help me alot thank you so much, this one is the video tutorial i needed for my gallery
@THE_WOLF_-ey9zg 10 ай бұрын
Thank for that) Im frontend student and this video helped me very very
@sarojrajah 11 ай бұрын
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 (>,
@kalicnegr5592 Жыл бұрын
thanks, you saved my grades 👍
@GreatStackDev Жыл бұрын
Happy to help!
@mayankgambhir4312 Жыл бұрын
Kitni pyari image gallery hai😊😊
@super-TechCctv 9 ай бұрын
finally i am done these short project very helpfull tutorial
@ahmedebrahim3118 2 жыл бұрын
Thank you so much.. More videos about javascript
@balazscsanyi3665 Жыл бұрын
Best image gallery for my webpage. Thank you.
@GreatStackDev Жыл бұрын
glad you liked it
@3dmonkeybizz Жыл бұрын
Fantastic tutorial. Thank you so much for this easy to follow process. It is super!
@willofwingaming2165 2 жыл бұрын
Your way of explaining is osm , thx for that video it's really helpful for me
@730_diksha_pimple3 2 жыл бұрын
Thank you so much bro. Your videos are awesome
@sahilrehman5565 2 жыл бұрын
Bro which laptop is best for coding
@syauqim9878 2 ай бұрын
Very very thankssssss❤
@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.
@doglovers1875 2 жыл бұрын
Please turn on subtitles on the channel videos Thank you very much for the great effort
@ashsummers9034 10 ай бұрын
Everything works for me but I can't see the next, prev, loading and close icons. What do I do? Thanks
@TJANIMATEDWISDOM 8 ай бұрын
You are exactly like me
@kaanmiracgedik2910 8 ай бұрын
Did you find a solution?
@mcathul5909 7 ай бұрын
I think lightbox.css file image path is not same as your project img path check
@sunnyraj2787 5 ай бұрын
Check your css file.and rename the the prev next load etc button.and also check js code name👍
@pozhilanvicky1243 5 ай бұрын
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!
@golu998 2 жыл бұрын
Please make video about career or certificate course about web designing career
@neets7519 9 ай бұрын
Amazing! Thanks so much it all worked
@chase4972 4 ай бұрын
Thanks Boss....
@SHREYA_FILMS0 2 жыл бұрын
thank you making image gallery video
@mohammadmeraj40 3 ай бұрын
Very nice I liked 👍 ❤️❤️❤️
@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 10 ай бұрын
Same here
@stefaniacristini Жыл бұрын
The best! Always. Thank You
@GreatStackDev Жыл бұрын
thank you!
@prasadbagul2146 10 ай бұрын
Very Awesome Video Sir 👍👍👍❤
@super-TechCctv 9 ай бұрын
God bless you dear brother
@muhammadabdillahasyhar6596 Жыл бұрын
thanks a lot bro, very helpful🙏🙏🙏
@alexismorales3712 2 жыл бұрын
You made me love they front-end
@AJ-yk9rj 10 ай бұрын
such a great video thank you!
@harshaljuwale 4 ай бұрын
Thank You Bro you helped me !!!!!
@sonamohialdin3376 Жыл бұрын
Very beautiful gallery
@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.
@qwerty415 2 жыл бұрын
its still not working on me bro :((
@abdullahiayanle2293 2 жыл бұрын
Thanks for posting this video, very useful
@RoBerTo89970 6 ай бұрын
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?
@XSubaruX 11 ай бұрын
u are my hero
@franmg2631 Жыл бұрын
thank you so much, this is so helpful
@GreatStackDev Жыл бұрын
Thanks Fran for comment
@michasosnowski5918 8 ай бұрын
Thank you.
@byAn_INDIAN 11 ай бұрын
thanx brooo
@kavalisuresh8670 2 жыл бұрын
Thank you bro. Useful
@aqsakhan8692 2 жыл бұрын
A big thanks sir
@ogundejidavid9366 2 жыл бұрын
Thanks. the video is helpful
@DigitalFringeHub 4 ай бұрын
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?
@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!
@pallavipradhan156 3 ай бұрын
Hii, everything is working well but the next,prev,close icons are not showing. How to fix that please say
@aruproy2983 2 жыл бұрын
Can you make video on Notice or up coming events section like that
@nurlanmehdiyev7428 2 жыл бұрын
Thank you veru=y much. You help me
@paulomagalhaes6752 2 жыл бұрын
Este tutorial estou adorando......
@ltdbd4442 2 жыл бұрын
JavaScript tutorial video, please
@abhishek__anand__ Жыл бұрын
Great Video
@jonasrocha2836 Жыл бұрын
A.M.A.Z.I.N.G 😍
@sylasyukale5095 Жыл бұрын
So I got the the part where I can hover over image 1 and click it but it seems to endlessly buffer?
@kaanmiracgedik2910 8 ай бұрын
Hello, I added this to my website, but the icons do not appear. What am I doing wrong? Can you help me
@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 Ай бұрын
Just use gap instead.
@emmanuelaohueri3459 11 ай бұрын
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..
@sonamuhialdeen7866 2 жыл бұрын
Very helpful
@TJANIMATEDWISDOM 8 ай бұрын
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 8 ай бұрын
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 8 ай бұрын
Do that for them all
@TJANIMATEDWISDOM 8 ай бұрын
@carizilla it worked... ooo waoooo Thanks very much carizilla♥️♥️♥️
@TJANIMATEDWISDOM 8 ай бұрын
@carizilla what about using it in a big website, then on media queries.....
@shuvo8959 2 жыл бұрын
You r awesome 😎
@dancing-lover4899 Жыл бұрын
I have use your code, it's work fine, but icon are missing like next, previous, close etc...How to solve this?
@kingmarta1527 2 жыл бұрын
Très bien exécuté
@lithembasolontsi7174 7 ай бұрын
I want to write descriptions on the pop up images,how do l do it
@pozhilanvicky1243 5 ай бұрын
I had issue with total number of photos it shows wrongly i was uploaded 12 photos its showing 29 what is the mistake
@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!
@frendiarahman 2 ай бұрын
Can it be applied to React + Vite?
@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?
@ZKSUNIL 3 ай бұрын
Legend Watching Exam Day 😅😂❤
@JadiRamanathan 9 ай бұрын
Can you share the code with us? I would appreciate that? AMAZING video! Thank u
@lexmark66 Жыл бұрын
epic
@user-vw3ii4po2i 11 ай бұрын
Code for grid-template is not working.
@phongthai2838 2 жыл бұрын
vl luôn đầu cắt moi
@chasmboi Жыл бұрын
The close buttons didnt seems can u help?
@user-mj3kr7ut4x 5 ай бұрын
Brother we images are white when they brighten
@shervicdave5520 2 жыл бұрын
did the image needed to he in the same sizes? what are the solutions if the image is not in the same sizes
@GreatStackDev 2 жыл бұрын
yes it should be in same size, you paint tool on windows to resize your image
@ultra-uniq 10 ай бұрын
What is the name of your color theme in vscode?
@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?
@user-uy6gf5ut6n 11 ай бұрын
How do you make one image pop up with multiple images in it. I want to make a gallery within a gallery.
@JeremyGarrettArtist Жыл бұрын
Excellent tutorial. Is there a way to have a transparent .png watermark superimposed onto the large displayed gallery pics?
@ChristianWarrior1 10 ай бұрын
for some reason the icons do not appear
@namankumar4782 2 жыл бұрын
When did you add those navigating and cross icons ?
@jmv1969 Жыл бұрын
It was referenced in the lightbox.css code
@stevebendersky2056 3 ай бұрын
i cant see the previous and next icons
@ahmedserag7072 2 жыл бұрын
why prev and next and close doesn't appear
@user-lr6ki7jj2b Жыл бұрын
How do i make the other images dissapear when i click on a image?
@projiz8837 2 жыл бұрын
can i use this script on my website or should i have license
@mohammadrasheed7891 2 жыл бұрын
How to create a graph and bars animation bottom to up use only html and css
GreatStack
Рет қаралды 42 М.
Кушать Хочу
Рет қаралды 7 МЛН
GreatStack
Рет қаралды 163 М.
Clever Techie
Рет қаралды 287 М.