How To Create Image Gallery Using HTML, CSS and Javascript | Lightbox Gallery
Vložit
- čas přidán 27. 08. 2024
- Upgrade your Clever Techie learning experience:
/ clevertechie
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:
/ clevertechie
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:
/ 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 ) clevertechie.com - PHP, JavaScript, Wordpress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams.
( CZcams Channel ) / clevertechietube
( Google Plus ) goo.gl/J71p6f - clever techie video tutorials.
( Facebook ) / clevertechie
( Twitter ) / theclevertechie
I just wanted to tell you that you saved me and my exam for tomorrow, thank you!
you make some of the best tutorials, directly to the point, dont waste of time , thanks a lot dude.
I've been searching the net for over a week to find something easy and useful, thanks a lot for this tutorial!
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
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!
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.
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!
at 2:35 , how do you copy all the corresponding image tags without manually typing them??
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....
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?
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?
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...
Well good but at the last my gallery img did not show next previous buttons
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 -.-
which code editor are you using
THANKYOU!! Been looking for something like this that actually works. I really like your tutorial style - easy to follow.
Thanks it was so good making my galary with the lightbox. Well explained
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?
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 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?
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/
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 got an issue that I have a video in the gallery that is not playing. please help. thanks!
Thank you very much for this great tutorial. It is well explained, well told, it is just brilliant!
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
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 )
How can i get all this image gallary inside a button...like after clicking button how can i display this image gallary
That was the most helpful and simplest explanation! Thanks!
How do you make thee small version of the images?
Hello sir, how to make next and previous button in the image viewer visible.
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!
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?
short and to the point ! Thank you !
Wow! One of the best tutorials out there...thanks man.
why did you write data-lightbox = "mygallery" and where is this is used? where is the JS Code?
Worked 100% perfectly.. thank you verymuch !!!
It works ! Happy New year Sir !
how to edit the "alwaysShowNavOnTouchDevices" ?
When I added this my w3 style stopped working? Can't these styles be combined?
The larger image did not show for me.
easy to learn and understand code
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?
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
hi, is it free to use LightBox plugin as a commercial use?
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
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...
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
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
Next, previous, loading and close do not show on my website. Do you know why? Thank you
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.
Man when i click a pic, it opens in full size, how do i resize that?
Thank uuu, I really needed this!!
Beautiful smart explanation
It worked...! Thank you very much...! Keep up the good work.
Amazing Tutorial, no words to say
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.
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 ?
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?
How to change the place of prev next and close button??? And how can we add title of the image??? Please help
2:36 where the hell did that clipboard data come from?
he just copied href files above lol
the buttons don't appear on my end :(
same here, did you managed to fix it?
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?
Here you are mentioned close next button tutorial. I want this
How can I use that 5 times in a page ?
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.
Hmmm, what do I do if I have a gallery of 1000 pictures? I need to know how to add them programmatically through javascript.
The navigation arrows do not display on the side.
is ist possible to use the lightbox with video too?
i have a mixed gallery :/
Thanks a lot. Its very helpful.
Can you put this on QR?
How did you copy and paste all of the images to insert into html?
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 is it. This is the video. Thanks
Thank you for this tutorial!
Hello, I followed along and everything worked except for the "close", "prev" and "next" icons that are not displaying. They are Invisible yet functional. How can I make them visible? Thanks
go to "/css/lightbox.min.css" and search for the word "images" so you can find the path of the "close" ,"prev" ... Then put the right path there.
@@phoebusphotography3827 Thank you so much! It worked.👋👋
Prev and next are invisible. Does anyone know why? Buttons prev and next works but are invisible
Nice Thank you so much, my question is, how to change the background color of the entire gallery to black??
thank you awsome tutorial but (next,prev...).png can't working. which way should i fix
ok i fixed bro awsome video
can you tell me the size of your small images?
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.
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 czcams.com/video/LDGtfhi_9rk/video.html. 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.
will u please make a video on creating dynamic header using javascript
How to add zoom option
thank you so so much , you are the best , saved my life bro!!!!
you're welcome brother man, glad I could help!
Awesome! Thanks for sharing.
Of course! Glad you found the video to be awesome!
It working but only showing back button image, close button image so on
Thankyou so much video it really helpful for me
amazing tutorial. i learned many cool stuff
hi, this looks very good, is it mobile friendly?
how to implement this in blogger.. cant able to add lightbox css to blogger.. help needed..
Great Video, thanks a lot !!
It helped me very well
The image doesn't load. I click it and a black screen shows up. Can someone tell me what went wrong?
i couldn't see any next, previous and close button on the lightbox. could you please help me with your immediate response.
Thank you
did you find a fix?
you rock man !!! i subbed keep the good work up
how to make your photos small because they are in 100's without much effort?anytips please?
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.
Thank you, sir!
This was really usefull for me thanks a ton!
thank you so much !really it helped me alot