HomeХобби и стильRelated VideosMore From: Clever Techie

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

138 ratings | 4870 views
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: https://www.patreon.com/posts/how-to-create-21449049 ( 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! ) ````````````````````````````````````````````````````````````````````````````````````````````` ( Website ) https://clevertechie.com - PHP, JavaScript, Wordpress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams. ( YouTube Channel ) https://www.youtube.com/c/CleverTechieTube ( Google Plus ) https://goo.gl/J71p6f - clever techie video tutorials. ( Facebook ) https://www.facebook.com/CleverTechie/ ( Twitter ) https://twitter.com/theclevertechie
Html code for embedding videos on your blog
Text Comments (18)
Alison Sutter (5 days ago)
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?
Alison Sutter (5 days ago)
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.
Full of Joy Studio (19 days ago)
can I know your all small image size please?
NegiDay27 (1 month ago)
thank you so much !really it helped me alot
Emag (1 month ago)
I am not getting the little icons to show up, the arrows, the closing button etc. Any idea what went wrong?
Emag (20 days ago)
+Connor Abbas Thank you!
Connor Abbas (20 days ago)
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!
Annika Fries (24 days ago)
Same problem here, did you find a solution yet?
David Astorga (1 month ago)
you make some of the best tutorials, directly to the point, dont waste of time , thanks a lot dude.
Lele Nounen (1 month ago)
Need to download that file 😑 ugh
Zubair Khan (2 months ago)
Hey Techie, I have a query, actually I am building newspaper pagination system for my company weekly newspaper, actually I am developing whole site. So If suppose any reader comes and select any week date then newspaper gonna b load and only one page will have to be shown at one time. I am just testing now, I have created a table with column name. date, newspaper, img1,img2,img3. These img1, img2, img3 are actually holding page1, page2, page3 of newspaper. So how to fetch array of column of images by dates and displaying them and controlling them using pagination. Till now I got a little success. img1,img2,img3 are displaying but with their column names here I got stuck that how to create pagination system. img1,img2,im3 are displaying all together. How to control them with pagination. Or is my query wrong or should I change my table system. or can we control them by Javascript. I am also thinking to put those images in one single column and then call them by date and create array of images and then Control them with php pagination system. Could you please give suggestion or make video on that. It's a real world problem men. Please help out. Thanks. Your Viewer.
I Am (2 months ago)
Zubair Khan (2 months ago)
It will be more exciting to have in vanilla js
Zubair Khan (2 months ago)
Clever Techie Yea it would be more fun learning.
Attila Katona (2 months ago)
Clever Techi nice tut, yeah the vanilla JS will be better for learning and understanding the tech under the hood.
Clever Techie (2 months ago)
I was actually thinking about doing that but it would take a while, I might still do that though because I think it would be more interesting as well.
rotten blade (2 months ago)
will u please make a video on creating dynamic header using javascript
Usam (2 months ago)
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

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.