I like very much... just one question... Arrow and X to quit doesn't appear. i mean if i click on the spots where normally they are, it works just don't show up arrow and X ... any advise? Thank you!
i am a newbie with that html stuff and i see lots of negative comments around here, crying about ''oh it's not working :('' WELL THEN MAKE IT WORK, there is google, if you're having a problem, solve it. This guy here made an incredible video, and tbh it took me 40 mins to find a solution to something that was bothering me. It just takes time, you can't just come here and get the source code or just write the same stuff he wrote and expect wonders. Thanks Clever Techie. LIke i mentioned, all the problems you have/had are mentioned in google, for those who couldn't see the arrows/X/loading gif . stackoverflow.com/questions/9864818/lightbox-2-on-html-site-next-previous-gifs-not-showing . Changing the name of the directory worked for me, in the lightbox file.css took me another 40 mins to solve this easy shit but still, don't complain, just use your brains. Your negativiry affects other users who come here to learn something, if they see only negative comments nobody will try to watch the video -.-
You know...? Actually, I am not using TWO sizes for the images like one small for thumbnail and the big display, no. Just one JPG file per image, to make it small/thumbnail, just apply some CSS on the thumbnails grid/nav images, what do you think about it?
worked fine except for the navigation arrows.. I did a little research...(= I lost a few more hairs LOL) The latest version of lightbox does not expect the image files to be in the same folder as the images.... My folder was Images_htm... I found that lightbox was actually looking for the images in.... wait for it.... in a subfolder .... named.... images ..... I created a folder in Images_htm named images , put the files in there and all was good..... (did not have to edit the css file)
I have the same issue; My initial folder had a different name, I also created a sub folder named "images", I have all files (pics + 4 mg files), still doesn't show the buttons...Any suggestions?
nvm, figured it out. In the lightbox.min.css, just change the "images/close.png)", to whatever the folder name is. And if you have subfolder, change it to "/folder/subfolder/close.png)", and your done. Cheers for the video.
HI excellent tutorial thanks you. I have followed it and have a gallery ready to incorporarte on my website but I would like more control over the image size - your example has a row of 4 images but mine displays 6 on each row, can you advise hiow this is determined please?
In addition, I would like to use this gallery for videos as well but it does not seem to pop up, it goes to the direct link. How can I keep it working even by adding video to the gallery?
That's really good thank you. Can you tell me what programme you use for bulk resizing of small images. I assume they all have to be the same size or proportion?
It's almost the same I asked him. I used the biggest one and then in CSS I scale it down to be shown as thumbnails, but maybe they could be heavy... I have to try...
I was wondering will lightbox also work if I fetched images directories from database? I want to use backend PHP with this. will it work? I have no knowledge yet in web but I create a lot of desktop API, from your experience will it work?
Index values are off somehow, such that when I have 3 photos is thinks I have 4 photos. I am also able to click through to the 4th photo (which doesn't exist) and its just another version of the 3rd photo. The javascript is also so unreadable finding the error in the index checking is impossible. I was able to modify the index display so that it shows that there are 3 photos, but it still will go to the fake 4th photo. I guess this lightbox code isn't meant to be modified...
If you're using v2.11.1, you may have to put deal with the navigation buttons before lightbox works at all. Seems mine wasn't working until I did that. And thanks Clever Techie.
Thank you buddy, that was great, but could you please help me how can I make its background transparent, because it made my background white totally, nothing left, thank you
I was looking forward to learning the vanilla JS behind lightbox applications. A decent video for those beginners looking to use premade tools though. Oh well
Thank you very much for the video. Lightbox is working perfectly but grayscale, scale 1.1 and hover properties do not work. I can see these properties are working when I am in Dreamweaver split mode. When I built a site preview, I could not see these properties. Do you have any idea what may cause this problem?
Hey ! I just tried it , but for some reason i dont see the buttons appearing while on the pictrue , the clicking left and right works . but can't see the buttons . Do you have any ideo how to fix this ?
@connor abbas came up with the soultion : "I had the same problem, it has to deal with the file structure of your project and where you stored the images. Just go into the lightbox.min.css file and change the path of the images. It should say... background: url(../images/prev.png) left 48% no-repeat; Just change it to the correct path of where your image is. If you have all your files and images in one project folder just change it to background: url(prev.png) left 48% no-repeat; That applies to all the icons and loading gif. Hope this helps!"
No images (arrows) showing up fix:Open the lightbox.min.css (css file), and edit the folder name*. Read through the text and where it says images, change it to your images folder name, and if the images are along with the html files, just remove the text "images". I had to change the text form images to img.
Hi, do you have a video that explain how to get pictures from a folder on your web server, wihtout having to right the name of the hundreds of images in that folder ? Thanks
Thanks for the tutorial. Almost everything is working as intended however when I view on a mobile device the larger image only opens at the size of the thumbnail. When I view using Chrome and firefox for mobile devices it opens as expected. Any ideas ?
go in paint for example if you dont have photoshop so: paint > open > image.jpg > resize > pixels > 1000px > 500px > 250px > u save it as small_image.jpg and ur done!
Hello Thanks you a lot. It works very well. I just have a little problem! Wenn I have a vertical picutre in my gallery it s ok but in the lightbox it turn 90°! Do you know how I can make that a vertical picture is shawn and stay vertical in the lightbox? Thanks.
this does not work with explorer, it is also causing trouble whenever I use a nav bar or add a logo at the top in firefox. the hover works but not the pop up.
I did the same, but when my website is online the lightbox doesn't work. It just displays the image without any arrow. To select another image I have to click back in Chrome. Do you know how to fix this issue?
I added 6 images only 3 are showing up. They're different sizes. 3 are showing up on the browser and the other 3 aren't but they're alternative text is showing. Idk what's happening.
I've been reading comments , seems like many people had same issue , basically code doesn't work correctly (tried to search in the Js file for mentioning icon path could not find anything )
you make some of the best tutorials, directly to the point, dont waste of time , thanks a lot dude.
I just wanted to tell you that you saved me and my exam for tomorrow, thank you!
I've been searching the net for over a week to find something easy and useful, thanks a lot for this tutorial!
I like very much... just one question... Arrow and X to quit doesn't appear. i mean if i click on the spots where normally they are, it works just don't show up arrow and X ... any advise? Thank you!
i am a newbie with that html stuff and i see lots of negative comments around here, crying about ''oh it's not working :('' WELL THEN MAKE IT WORK, there is google, if you're having a problem, solve it. This guy here made an incredible video, and tbh it took me 40 mins to find a solution to something that was bothering me. It just takes time, you can't just come here and get the source code or just write the same stuff he wrote and expect wonders. Thanks Clever Techie.
LIke i mentioned, all the problems you have/had are mentioned in google, for those who couldn't see the arrows/X/loading gif . stackoverflow.com/questions/9864818/lightbox-2-on-html-site-next-previous-gifs-not-showing . Changing the name of the directory worked for me, in the lightbox file.css took me another 40 mins to solve this easy shit but still, don't complain, just use your brains. Your negativiry affects other users who come here to learn something, if they see only negative comments nobody will try to watch the video -.-
My senior told me to create like this,and I got this awesome video,
Many thanks for you valuable video 😊😊
I appreciate that, glad you found the video to be valuable!
Thought I was going to practice some JavaScript but it’s still a good vid tho
😂😂🤣 I saw your comment but was still curious. No is at all.
You know...? Actually, I am not using TWO sizes for the images like one small for thumbnail and the big display, no. Just one JPG file per image, to make it small/thumbnail, just apply some CSS on the thumbnails grid/nav images, what do you think about it?
Thanks a lot. It works as you told. I'm working on my online portfolio for my internship. RESPECT!
Yes! it worked...Thanks you
Clever Techie.. You are the best....
worked fine except for the navigation arrows..
I did a little research...(= I lost a few more hairs LOL)
The latest version of lightbox does not expect the image files to
be in the same folder as the images....
My folder was Images_htm... I found that lightbox was actually looking
for the images in.... wait for it.... in a subfolder .... named....
images ..... I created a folder in Images_htm named images ,
put the files in there and all was good.....
(did not have to edit the css file)
I have the same issue; My initial folder had a different name, I also created a sub folder named "images", I have all files (pics + 4 mg files), still doesn't show the buttons...Any suggestions?
nvm, figured it out. In the lightbox.min.css, just change the "images/close.png)", to whatever the folder name is. And if you have subfolder, change it to "/folder/subfolder/close.png)", and your done. Cheers for the video.
@@IRM2 thank u bruh, saved my time :)
@@rasulali4690 hey I exactly couldnt get it could you please explain inbrief as I am getting the same issue
@@IRM2 could you please explain in brief as m getting the same issue
HI excellent tutorial thanks you. I have followed it and have a gallery ready to incorporarte on my website but I would like more control over the image size - your example has a row of 4 images but mine displays 6 on each row, can you advise hiow this is determined please?
at 2:35 , how do you copy all the corresponding image tags without manually typing them??
THANKYOU!! Been looking for something like this that actually works. I really like your tutorial style - easy to follow.
In addition, I would like to use this gallery for videos as well but it does not seem to pop up, it goes to the direct link. How can I keep it working even by adding video to the gallery?
Thanks it was so good making my galary with the lightbox. Well explained
That's really good thank you. Can you tell me what programme you use for bulk resizing of small images. I assume they all have to be the same size or proportion?
Nice video, but why two images of one picture? You can sizesed in the code? Or is the smaller images for the performance?
It's almost the same I asked him. I used the biggest one and then in CSS I scale it down to be shown as thumbnails, but maybe they could be heavy... I have to try...
I was wondering will lightbox also work if I fetched images directories from database? I want to use backend PHP with this. will it work? I have no knowledge yet in web but I create a lot of desktop API, from your experience will it work?
Index values are off somehow, such that when I have 3 photos is thinks I have 4 photos. I am also able to click through to the 4th photo (which doesn't exist) and its just another version of the 3rd photo. The javascript is also so unreadable finding the error in the index checking is impossible. I was able to modify the index display so that it shows that there are 3 photos, but it still will go to the fake 4th photo. I guess this lightbox code isn't meant to be modified...
which code editor are you using
Nice Thank you so much, my question is, how to change the background color of the entire gallery to black??
If you're using v2.11.1, you may have to put deal with the navigation buttons before lightbox works at all. Seems mine wasn't working until I did that. And thanks Clever Techie.
which code editor was he using
Thank you buddy, that was great, but could you please help me how can I make its background transparent, because it made my background white totally, nothing left, thank you
I was looking forward to learning the vanilla JS behind lightbox applications. A decent video for those beginners looking to use premade tools though. Oh well
What size in px are your small images?
I did 200 x 200 which is a square his look like they might be 250 x 200?
That was the most helpful and simplest explanation! Thanks!
Well good but at the last my gallery img did not show next previous buttons
Thank you very much for the video. Lightbox is working perfectly but grayscale, scale 1.1 and hover properties do not work. I can see these properties are working when I am in Dreamweaver split mode. When I built a site preview, I could not see these properties. Do you have any idea what may cause this problem?
hi, is it free to use LightBox plugin as a commercial use?
It worked...! Thank you very much...! Keep up the good work.
Thank you very much for this great tutorial. It is well explained, well told, it is just brilliant!
short and to the point ! Thank you !
All worked fine in VS code but when uploaded to GitHub, it functions but the nav images don't show. Ideas?
change your images directory name to "images" and put inside all of your images
Hey !
I just tried it , but for some reason i dont see the buttons appearing while on the pictrue , the clicking left and right works . but can't see the buttons . Do you have any ideo how to fix this ?
@connor abbas came up with the soultion :
"I had the same problem, it has to deal with the file structure of your project and where you stored the images. Just go into the lightbox.min.css file and change the path of the images. It should say... background: url(../images/prev.png) left 48% no-repeat; Just change it to the correct path of where your image is. If you have all your files and images in one project folder just change it to background: url(prev.png) left 48% no-repeat; That applies to all the icons and loading gif. Hope this helps!"
I had the same problem. The problem is that you get gif when you duplicate it (on my Mac). You should change the picture from gif to png.
@@pluis1570 Hello. I did everything with the icons and i have the same problem. No icons appear. I use Sublime text 2 for coding. What's the problem ?
@@KostasNezis have you changed the path in the lightbox.min.css file ?
@@pluis1570 Thankyou so much man! I wouldn't have found it without your comment :/ Had to get rid of the ../images and change it to jut IMG/
hi, this looks very good, is it mobile friendly?
Navigation arrows and close button not shown. But every mouse click of same place are work well. How to show these png, gif files? Thanks in advance
No images (arrows) showing up fix:Open the lightbox.min.css (css file), and edit the folder name*.
Read through the text and where it says images, change it to your images folder name, and if the images are along with the html files, just remove the text "images".
I had to change the text form images to img.
where is the folder name bit
@@gatzestreicheln3226
Hi, do you have a video that explain how to get pictures from a folder on your web server, wihtout having to right the name of the hundreds of images in that folder ?
Thanks
Hello, VERY NICE WORK!! but final result with me did not showing the arrows or close marks it works but not show off why ? and how to fix?
Worked 100% perfectly.. thank you verymuch !!!
Thanks a lot. Its very helpful.
It works ! Happy New year Sir !
Thanks for the tutorial. Almost everything is working as intended however when I view on a mobile device the larger image only opens at the size of the thumbnail. When I view using Chrome and firefox for mobile devices it opens as expected. Any ideas ?
How do you get the picture small and big?
go in paint for example if you dont have photoshop so: paint > open > image.jpg > resize > pixels > 1000px > 500px > 250px > u save it as small_image.jpg and ur done!
How do you make thee small version of the images?
Amazing Tutorial, no words to say
Beautiful smart explanation
Wow! One of the best tutorials out there...thanks man.
Hello sir, how to make next and previous button in the image viewer visible.
Awesome! Thanks for sharing.
Of course! Glad you found the video to be awesome!
Hello Thanks you a lot. It works very well. I just have a little problem! Wenn I have a vertical picutre in my gallery it s ok but in the lightbox it turn 90°! Do you know how I can make that a vertical picture is shawn and stay vertical in the lightbox? Thanks.
Is there a way of adjusting this to make a website visible in the Lightbox? I would like to be able to put a link to a gallery website instead.
When I added this my w3 style stopped working? Can't these styles be combined?
easy to learn and understand code
Thank you sooo Much for this Excellent tutorial
This is it. This is the video. Thanks
this does not work with explorer, it is also causing trouble whenever I use a nav bar or add a logo at the top in firefox. the hover works but not the pop up.
I did the same, but when my website is online the lightbox doesn't work. It just displays the image without any arrow. To select another image I have to click back in Chrome. Do you know how to fix this issue?
Nice explanation Thanks. Can you please tell me that this gallery page is responsive or not? Pls do the needful or the same.
it is responsiv
Thank you! Very good Video
Thank you, sir!
thank you so so much , you are the best , saved my life bro!!!!
you're welcome brother man, glad I could help!
amazing tutorial. i learned many cool stuff
This was really usefull for me thanks a ton!
Great Video, thanks a lot !!
It helped me very well
This was very usefull thanks for the great tutorial.
How did you copy and paste all of the images to insert into html?
is ist possible to use the lightbox with video too?
i have a mixed gallery :/
Anyone know how to use with Java in jsp files. It works great, but I don't see images: close.png, loading.gif, next.png, prev.png
Thank you for this tutorial!
nice, but I'n having trouble put things on a single page like : A drop down menu then insert this somewhere and make it appear in a single page
dude u should have in the same place photos and file u created otherwise the photos doesnt work
hello, hope you're good, thanks for the video and i wanna say that, I'm watching this video from Africa so stop thinking Africa is a jungle
Hello! Nice work! Thank you very much!
will u please make a video on creating dynamic header using javascript
How to change the place of prev next and close button??? And how can we add title of the image??? Please help
Can i use this for videos as well?
Thank uuu, I really needed this!!
Can you change caption font/size?
this is what I was looking for! Much appreciated. Lets see how it works for me :)
After some struggle it works! Thank you.
what app did u use?
What_do_you_mean_by_app?_I_used_Visual_studio_and_ASP._NET_Framework_but_It_should_work_just_fine_with_Whatever_IDE_you_use._Its_just_javascript_library_you_need_to_refference
Sorry_my_spacebar_does_not_work_for_so,e_reason....
thank you awsome tutorial but (next,prev...).png can't working. which way should i fix
ok i fixed bro awsome video
why did you write data-lightbox = "mygallery" and where is this is used? where is the JS Code?
can you tell me the size of your small images?
very good tutorial. Thank you
I added 6 images only 3 are showing up. They're different sizes. 3 are showing up on the browser and the other 3 aren't but they're alternative text is showing. Idk what's happening.
Thanks!! Its working great!
Next, previous, loading and close do not show on my website. Do you know why? Thank you
and boom its working
how to implement this in blogger.. cant able to add lightbox css to blogger.. help needed..
How can i get all this image gallary inside a button...like after clicking button how can i display this image gallary
how to edit the "alwaysShowNavOnTouchDevices" ?
2:36 where the hell did that clipboard data come from?
he just copied href files above lol
you rock man !!! i subbed keep the good work up
was really helpful
Hmmm, what do I do if I have a gallery of 1000 pictures? I need to know how to add them programmatically through javascript.
Here you are mentioned close next button tutorial. I want this
how you change path for (close, next,prev) icons?? When i run the console it make error by looking for them in localUser/desktop/images folder .
I've been reading comments , seems like many people had same issue , basically code doesn't work correctly (tried to search in the Js file for mentioning icon path could not find anything )
Thank you .
Very nice tutorial
Really great tutorial, thanks a lot! You explain very well so I can´t wait to learn from you more. I subscribe.
Glad you liked it, thank you for subscribing!
I got an issue that I have a video in the gallery that is not playing. please help. thanks!