How To Make Responsive Image Gallery With HTML CSS JS | Lightbox Image Gallery Design
Вставка
- Опубліковано 19 вер 2024
- 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:
◼️ UA-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
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!
Gallery from start to finish - Excellent. Thank you.
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;
Bro you always save my Life!! Thanks so much...
@@kniya3467 sorry automatic keyboard
👍
Yees my too
Great video man, thanks for this tutorial ññññ
I really like you videos sir
I had an exam today ! This video is a life saver ! Thank you so much dude !
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".
just add below script
lightbox.option({
albumLabel: "Bild %1 von %2"
});
Mine still don’t work even when I change the url. So I am missing icons on image. Everything else works fine.
Excellent Tutorial!! Thank you so much. Clear and without extra stuff, just what is needed.
Thank you again!
Dude you're awsome mate, you're the best, you're the King of "short effective tutorial UA-camrs"
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
I really like your tutorials. You're explanation it's clear. Keep it up🤜
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
Really good videos, you have a great way of pacing the coding and explaining piece by piece. Thanks!
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;
}
Thank you so much.. More videos about javascript
Great! But for more dynamic you should use for or foreach loop! Following the DRY concept! Less code same solution 😉😊!
finally i am done these short project
very helpfull tutorial
Please turn on subtitles on the channel videos Thank you very much for the great effort
Thank for that) Im frontend student and this video helped me very very
Thank you so much bro. Your videos are awesome
Bro which laptop is best for coding
Very nice I liked 👍 ❤️❤️❤️
Hello sir.. Can u please create a front end development course sir plss??
Yes sir please. Start a fronted web development course.plz 🙏. N who wants this course plz comment on this. .. Thank you
@Md Abu Raihan hope so brother.
Yes! From the United States, we would love 💗 to have Easy Tutorials create a front end development course 😀… Cheers!
Again, I was checking the galleriyand it works great!!, Man thank you so much!
thank you making image gallery video
Please make video about career or certificate course about web designing career
Very very thankssssss❤
thanks, you saved my grades 👍
Happy to help!
Kitni pyari image gallery hai😊😊
Best image gallery for my webpage. Thank you.
glad you liked it
you really help me alot thank you so much,
this one is the video tutorial i needed for my gallery
Thanks Boss....
Very Awesome Video Sir 👍👍👍❤
Fantastic tutorial. Thank you so much for this easy to follow process. It is super!
God bless you dear brother
Your way of explaining is osm , thx for that video it's really helpful for me
Very beautiful gallery
Amazing! Thanks so much it all worked
thanks a lot bro, very helpful🙏🙏🙏
Thank You Bro you helped me !!!!!
such a great video thank you!
You made me love they front-end
Great Video
Thanks for posting this video, very useful
The best! Always. Thank You
thank you!
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 (>,
Thank you bro. Useful
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??
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.
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.
Everything works for me but I can't see the next, prev, loading and close icons. What do I do? Thanks
You are exactly like me
Did you find a solution?
I think lightbox.css file image path is not same as your project img path check
Check your css file.and rename the the prev next load etc button.and also check js code name👍
S bro i add lightbox. Css in head and change the path and rename it now it was working😊
u are my hero
Thanks. the video is helpful
JavaScript tutorial video, please
Thank you.
A big thanks sir
Very helpful
You r awesome 😎
Thank you veru=y much. You help me
Can you make video on Notice or up coming events section like that
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.
its still not working on me bro :((
thank you so much, this is so helpful
Thanks Fran for comment
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!!!
I'm facing the same problem too
Same here
Este tutorial estou adorando......
Très bien exécuté
A.M.A.Z.I.N.G 😍
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!
epic
thanx brooo
vl luôn đầu cắt moi
Hii, everything is working well but the next,prev,close icons are not showing. How to fix that please say
Can you share the code with us? I would appreciate that? AMAZING video! Thank u
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?
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
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
Do that for them all
@carizilla it worked... ooo waoooo
Thanks very much carizilla♥️♥️♥️
@carizilla what about using it in a big website, then on media queries.....
Is there an alternative to grid-gap? My vs code editor is telling me it's obsolete and that I should avoid using it
Just use gap instead.
Excellent tutorial. Is there a way to have a transparent .png watermark superimposed onto the large displayed gallery pics?
Good img gallery... please provide any good home page image slider if possible..
Can it be applied to React + Vite?
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?
I want to write descriptions on the pop up images,how do l do it
Brother we images are white when they brighten
Hello, I added this to my website, but the icons do not appear. What am I doing wrong? Can you help me
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..
So I got the the part where I can hover over image 1 and click it but it seems to endlessly buffer?
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?
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!
What is the name of your color theme in vscode?
Brother, please give we JavaScript project video please bro
I had issue with total number of photos it shows wrongly i was uploaded 12 photos its showing 29 what is the mistake
Code for grid-template is not working.
When did you add those navigating and cross icons ?
It was referenced in the lightbox.css code
❤❤
I have use your code, it's work fine, but icon are missing like next, previous, close etc...How to solve this?
did the image needed to he in the same sizes? what are the solutions if the image is not in the same sizes
yes it should be in same size, you paint tool on windows to resize your image
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?
i cant see the previous and next icons
can i use this script on my website or should i have license
The close buttons didnt seems can u help?
How do you make one image pop up with multiple images in it. I want to make a gallery within a gallery.
How to create a graph and bars animation bottom to up use only html and css
JavaScript tutorial video