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!
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;
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".
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 (>,
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.
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?
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
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!!!
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!
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!
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 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?
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; }
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..
Gallery from start to finish - Excellent. Thank you.
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!
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;
Dude you're awsome mate, you're the best, you're the King of "short effective tutorial RUclipsrs"
Kitni pyari image gallery hai😊😊
This was so easier done with your help, thank you so much 😁
I had an exam today ! This video is a life saver ! Thank you so much dude !
Bro you always save my Life!! Thanks so much...
@@KuKu45i sorry automatic keyboard
👍
Yees my too
Really good videos, you have a great way of pacing the coding and explaining piece by piece. Thanks!
I really like you videos sir
Thank you! This is exactly what I was looking for and you explained it very well.
Excellent Tutorial!! Thank you so much. Clear and without extra stuff, just what is needed.
Thank you again!
finally i am done these short project
very helpfull tutorial
Again, I was checking the galleriyand it works great!!, Man thank you so much!
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
Thank for that) Im frontend student and this video helped me very very
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.
Best image gallery for my webpage. Thank you.
glad you liked it
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
God bless you dear brother
Very Awesome Video Sir 👍👍👍❤
I really like your tutorials. You're explanation it's clear. Keep it up🤜
Very nice I liked 👍 ❤️❤️❤️
Thank You Bro you helped me !!!!!
it was perfect
thanks
You're welcome. 😊 Keep coding.
thanks, you saved my grades 👍
Happy to help!
Amazing! Thanks so much it all worked
Thank you so much.. More videos about javascript
Great video man, thanks for this tutorial ññññ
Thank you so much bro. Your videos are awesome
thanks a lot bro, very helpful🙏🙏🙏
The best! Always. Thank You
thank you!
thank you making image gallery video
Great! But for more dynamic you should use for or foreach loop! Following the DRY concept! Less code same solution 😉😊!
such a great video thank you!
Very beautiful gallery
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 (>,
Very very thankssssss❤
Bro which laptop is best for coding
Your way of explaining is osm , thx for that video it's really helpful for me
Thank You!
You made me love they front-end
Nice tip!
Please turn on subtitles on the channel videos Thank you very much for the great effort
Please make video about career or certificate course about web designing career
Fantastic tutorial. Thank you so much for this easy to follow process. It is super!
Thank you bro. Useful
Thanks for posting this video, very useful
thank you so much, this is so helpful
Thanks Fran for comment
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!
Thanks. the video is helpful
u are my hero
Great Video
You r awesome 😎
A.M.A.Z.I.N.G 😍
Thanks Boss....
Thank you.
Thank you veru=y much. You help me
Hello, I added this to my website, but the icons do not appear. What am I doing wrong? Can you help me
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 :((
A big thanks sir
Très bien exécuté
Legend Watching Exam Day 😅😂❤
Can you make video on Notice or up coming events section like that
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.
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 have the same issue
Very helpful
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😊
thanx brooo
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.....
Este tutorial estou adorando......
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
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!
vl luôn đầu cắt moi
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.
Can it be applied to React + Vite?
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!
Can you share the code with us? I would appreciate that? AMAZING video! Thank u
Excelente pero mira que lo hice tal cual y no me aparecen los controles
epic
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?
Good img gallery... please provide any good home page image slider if possible..
JavaScript tutorial video, please
What is the name of your color theme in vscode?
can i use this script on my website or should i have license
Excellent tutorial. Is there a way to have a transparent .png watermark superimposed onto the large displayed gallery pics?
When did you add those navigating and cross icons ?
It was referenced in the lightbox.css code
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?
So I got the the part where I can hover over image 1 and click it but it seems to endlessly buffer?
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;
}
Hii, everything is working well but the next,prev,close icons are not showing. How to fix that please say
Brother, please give we JavaScript project video please bro
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
I want to write descriptions on the pop up images,how do l do it
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..
The close buttons didnt seems can u help?
Brother we images are white when they brighten
Code for grid-template is not working.
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 have use your code, it's work fine, but icon are missing like next, previous, close etc...How to solve this?