How To Create Image Gallery Using HTML, CSS and Javascript | Lightbox Gallery

[@BuzzyBeeNexySerbia]

I just wanted to tell you that you saved me and my exam for tomorrow, thank you!

[@davida6883]

you make some of the best tutorials, directly to the point, dont waste of time , thanks a lot dude.

[@Batareika007]

I've been searching the net for over a week to find something easy and useful, thanks a lot for this tutorial!

[@ArifHussain-gf2jz]

My senior told me to create like this,and I got this awesome video, Many thanks for you valuable video 😊😊

[@clevertechie]

I appreciate that, glad you found the video to be valuable!

[@raymondbedard3272]

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)

[@IRM2]

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?

[@IRM2]

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.

[@rasulali4690]

@@IRM2 thank u bruh, saved my time :)

[@shrutikarpe4700]

@@rasulali4690 hey I exactly couldnt get it could you please explain inbrief as I am getting the same issue

[@shrutikarpe4700]

@@IRM2 could you please explain in brief as m getting the same issue

[@BamBam-je4yf]

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

[@gianlucatiengo7306]

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!

[@sturgeburger]

at 2:35 , how do you copy all the corresponding image tags without manually typing them??

[@uriel6673]

Thought I was going to practice some JavaScript but it’s still a good vid tho

[@chippandenga6722]

😂😂🤣 I saw your comment but was still curious. No is at all.

[@wafflemaru4597]

Thanks a lot. It works as you told. I'm working on my online portfolio for my internship. RESPECT!

[@mariocarnival]

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?

[@nowrajrai8965]

Yes! it worked...Thanks you Clever Techie.. You are the best....

[@DaviePlaysGuitar]

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?

[@AlisonDurazo]

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?

[@pluis1570]

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 ?

[@pluis1570]

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

[@adrianmoser2295]

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.

[@KostasNezis]

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

[@pluis1570]

@@KostasNezis have you changed the path in the lightbox.min.css file ?

[@alliwell2075]

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

[@glimdark]

which code editor are you using

[@danishmirza5857]

Well good but at the last my gallery img did not show next previous buttons

[@SquareEarth1]

THANKYOU!! Been looking for something like this that actually works. I really like your tutorial style - easy to follow.

[@saneichavakkadan2]

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

[@gatzestreicheln3226]

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.

[@sholaidowu7660]

where is the folder name bit @@gatzestreicheln3226

[@jonathancarter2347]

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.

[@glimdark]

which code editor was he using

[@joandemello]

Thanks it was so good making my galary with the lightbox. Well explained

[@GrantDavis]

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

[@elyorbekaliev4005]

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

[@exogendesign4582]

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?

[@UsaM]

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

[@lirigzonizeti7143]

dude u should have in the same place photos and file u created otherwise the photos doesnt work

[@jonathancarter2347]

All worked fine in VS code but when uploaded to GitHub, it functions but the nav images don't show. Ideas?

[@kovacssandor796]

change your images directory name to "images" and put inside all of your images

[@axender269]

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

[@nashaatsalah7872]

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?

[@haccuk]

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?

[@olsenstern]

Thank you very much for this great tutorial. It is well explained, well told, it is just brilliant!

[@bhanukaweerasekara9474]

It worked...! Thank you very much...! Keep up the good work.

[@tang3151]

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.

[@Chineization]

I got an issue that I have a video in the gallery that is not playing. please help. thanks!

[@donborjuto7321]

What size in px are your small images?

[@dan32663266]

I did 200 x 200 which is a square his look like they might be 250 x 200?

[@surnlihengtechnology1958]

How do you get the picture small and big?

[@milanveres9921]

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!

[@DanisPhotographe]

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

[@sabinechancel]

It works ! Happy New year Sir !

[@AlisonDurazo]

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.

[@DavidAshby1]

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 ?

[@andreigodunov330]

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 .

[@andreigodunov330]

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 )

[@Dominik-wg1yl]

Next, previous, loading and close do not show on my website. Do you know why? Thank you

[@matty965]

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?

[@balajikrish5136]

Hello sir, how to make next and previous button in the image viewer visible.

[@redseantlworld]

Wow! One of the best tutorials out there...thanks man.

[@khaledalkhder9110]

hi, is it free to use LightBox plugin as a commercial use?

[@trippy_b]

why did you write data-lightbox = "mygallery" and where is this is used? where is the JS Code?

[@freektom]

Nice Thank you so much, my question is, how to change the background color of the entire gallery to black??

[@hakana8597]

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?

[@luciddoggo5094]

How do you make thee small version of the images?

[@JelleRuben]

Nice video, but why two images of one picture? You can sizesed in the code? Or is the smaller images for the performance?

[@mariocarnival]

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

[@Y0y0Jester]

Hmmm, what do I do if I have a gallery of 1000 pictures? I need to know how to add them programmatically through javascript.

[@stylewithyamini]

How to change the place of prev next and close button??? And how can we add title of the image??? Please help

[@ruchitamore7391]

How can i get all this image gallary inside a button...like after clicking button how can i display this image gallary

[@bayareakidsclub5999]

How did you copy and paste all of the images to insert into html?

[@malintha_prasad]

Worked 100% perfectly.. thank you verymuch !!!

[@themiyajayakodi4052]

Amazing Tutorial, no words to say

[@woelneberg]

When I added this my w3 style stopped working? Can't these styles be combined?

[@andrewjwentzel9349]

That was the most helpful and simplest explanation! Thanks!

[@darkerarts]

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.

[@Misc_useful]

Beautiful smart explanation

[@mrlevo27]

is ist possible to use the lightbox with video too? i have a mixed gallery :/

[@capstone-switzerland3071]

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.

[@TradingWithGichuru]

This is it. This is the video. Thanks

[@PavelKostal]

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

[@natashapramodsawant6157]

easy to learn and understand code

[@ashraffaly7915]

Thanks a lot. Its very helpful.

[@Daniel14Mejia]

Man when i click a pic, it opens in full size, how do i resize that?

[@helanacampling1922]

It just doesn't work. It will not load the css or the javascript. It just displays all the images and when you click on them the screen goes blank.

[@mohammedshajahan550]

i couldn't see any next, previous and close button on the lightbox. could you please help me with your immediate response. Thank you

[@Drcones]

did you find a fix?

[@mucahidadnancanbilgin6469]

thank you awsome tutorial but (next,prev...).png can't working. which way should i fix

[@mucahidadnancanbilgin6469]

ok i fixed bro awsome video

[@henkgoethals5449]

Navigation buttons are not visible. And YES the images are stored in the correct folder on my computer (I always store all my images by default in a folder called 'images', just like the lightbox css), and YES I have used quotes (" "), and YES I have tried dropping the . . / Etc etc etc..... Nothing works. Am going crazy here.

[@henkgoethals5449]

For any of you poor sods out there having the same problem: I found the solution, but don't ask me how and why this works. Just check out kzbin.info/www/bejne/gnWqpZmensRsqM0. The guy giving this tutorial runs into exactly the same issue: none of the nav buttons are showing up. Watch the end of the video en see how he solves it. I tried it, not with the latest version of Lightbox, but with the 2.10 version, and it worked. It involves referring in the DOM to both (!!!!!!) lightbox.min.css ànd lightbox.css --- in that order, not the other way round. Try it, it's most likely going to work.

[@christianek.963]

Thank uuu, I really needed this!!

[@sk3424]

thank you so so much , you are the best , saved my life bro!!!!

[@clevertechie]

you're welcome brother man, glad I could help!

[@alainroos5383]

short and to the point ! Thank you !

[@rodrigoitit]

Awesome! Thanks for sharing.

[@clevertechie]

Of course! Glad you found the video to be awesome!

[@mr_alam6867]

It working but only showing back button image, close button image so on Thankyou so much video it really helpful for me

[@OusmaneJustinGuiro]

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

[@ankitaumredkar8368]

Here you are mentioned close next button tutorial. I want this

[@karuvifoundation2857]

how to implement this in blogger.. cant able to add lightbox css to blogger.. help needed..

[@oricketts5076]

Can you change caption font/size?

[@ujjwalrustagi8690]

The navigation arrows do not display on the side.

[@lexxxo17]

the buttons don't appear on my end :(

[@jovicakulja7031]

same here, did you managed to fix it?

[@Eddycoolbiscuits]

The image doesn't load. I click it and a black screen shows up. Can someone tell me what went wrong?

[@lauramessick607]

The larger image did not show for me.

[@jakubvorel4416]

how to edit the "alwaysShowNavOnTouchDevices" ?

[@rathernotdisclose8064]

2:36 where the hell did that clipboard data come from?

[@DJAtom]

he just copied href files above lol

[@jotsarupa]

how to make your photos small because they are in 100's without much effort?anytips please?

[@TrangLe-dp8jf]

can you tell me the size of your small images?

[@avadheshmaurya1972]

Nice explanation Thanks. Can you please tell me that this gallery page is responsive or not? Pls do the needful or the same.

[@Johannes2730]

it is responsiv

[@russian161-rus]

What is mygallery you added??????

[@silasrodrigues7582]

Prev and next are invisible. Does anyone know why? Buttons prev and next works but are invisible

[@akaraonyestephen5516]

you rock man !!! i subbed keep the good work up

[@ashokk9289]

Thank you sooo Much for this Excellent tutorial

[@silviafricova1779]

Really great tutorial, thanks a lot! You explain very well so I can´t wait to learn from you more. I subscribe.

[@clevertechie]

Glad you liked it, thank you for subscribing!

[@simonjolet4881]

Great Video, thanks a lot !! It helped me very well

[@ThrReAlMaDrIdBoY7]

Thank you! Very good Video

[@marcelanratonel9025]

Can you put this on QR?

[@inesreisx]

hi, this looks very good, is it mobile friendly?

[@andrewandrosow4797]

Hello! Nice work! Thank you very much!

[@baykus790]

amazing tutorial. i learned many cool stuff