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

Upgrade your Clever Techie learning experience:

UPDATE! (9/13/19) New features and improvements for Clever Techie Patreons:

1. Download full source code with detailed comments - easy to learn and understand code
2. Weekly source code file updates by Clever Techie - every time I learn new things about a topic I will add it to the source file and let you know about the update - keep up with the latest coding technologies
3. Library of custom Clever Techie functions with descriptive, easy to understand comments - skyrocket coding productivity, code more efficiently by using Clever library of custom re-usable functions
4. Syntax code summary - memorize and review previously learned code faster
4. Organized file structure - access all Clever Techie lessons, source code, graphics, diagrams and cheat sheet from a single workspace - no more searching around for previously covered material and source code - save enormous amount of time and effort
5. Outline of topics the source file covers - fast review of all previously learned coding lessons
6. Access to all full HD 1080p videos with no ads
7. Console input examples - interactive examples that make it easier to understand and learn coding
8. Access to updated PHP Programming Book by Clever Techie
9. Early access to Clever Techie videos

Subscribe to Clever Techie patreon:
Learn how to create image gallery with HTML, CSS and Javascript. We're also going to implement a package called Lightbox which makes creating image galleries a breeze. This is a very easy tutorial that uses basic HTML, the point is to see how easily we can implement Lightbox and basic HTML with CSS to quickly create the image gallery.

``````````````````````````````````````````````````````````````````````````````````````````````
Hey guys, I'm now using Patreon to share improved and updated video content and source files. For a small fee you can access all the downloadable files from this lesson (source code, icons & graphics, cheat sheets, OneNote notes) and everything else included in the video from the Patreon page. Additionally, you will get access to ALL Clever Techie videos in HD format with no ads. Thank you so much for supporting Clever Techie :)

Download this video's files here:

( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! )

`````````````````````````````````````````````````````````````````````````````````````````````

[davida]

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

[BuzzyBeeNexySerbia]

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

[sturgeburger]

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

[Batareika]

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

[raymondbedard]

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
(did not have to edit the css file)

[gltechbuddy]

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!

[ArifHussain-gfjz]

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

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

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

[exogendesign]

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?

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

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

[uriel]

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

[BamBam-jeyf]

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.

[pluis]

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 ?

[nowrajrai]

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

[wafflemaru]

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

[khaledalkhder]

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

[donborjuto]

What size in px are your small images?