Тёмный

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

Clever Techie
Подписаться 102 тыс.
Просмотров 286 тыс.
50% 1

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.
( RU-vid Channel ) / clevertechietube
( Google Plus ) goo.gl/J71p6f - clever techie video tutorials.
( Facebook ) / clevertechie
( Twitter ) / theclevertechie

Хобби

Опубликовано:

 

15 сен 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 290   
@davida6883
@davida6883 5 лет назад
you make some of the best tutorials, directly to the point, dont waste of time , thanks a lot dude.
@Batareika007
@Batareika007 2 года назад
I've been searching the net for over a week to find something easy and useful, thanks a lot for this tutorial!
@BuzzyBeeNexySerbia
@BuzzyBeeNexySerbia 3 года назад
I just wanted to tell you that you saved me and my exam for tomorrow, thank you!
@SquareEarth1
@SquareEarth1 3 года назад
THANKYOU!! Been looking for something like this that actually works. I really like your tutorial style - easy to follow.
@wafflemaru4597
@wafflemaru4597 4 года назад
Thanks a lot. It works as you told. I'm working on my online portfolio for my internship. RESPECT!
@haccuk
@haccuk 4 года назад
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?
@redseantlworld
@redseantlworld 4 года назад
Wow! One of the best tutorials out there...thanks man.
@sabinechancel
@sabinechancel 4 года назад
It works ! Happy New year Sir !
@nowrajrai8965
@nowrajrai8965 4 года назад
Yes! it worked...Thanks you Clever Techie.. You are the best....
@AlisonDurazo
@AlisonDurazo 5 лет назад
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?
@joandemello
@joandemello 3 года назад
Thanks it was so good making my galary with the lightbox. Well explained
@olsenstern
@olsenstern 3 года назад
Thank you very much for this great tutorial. It is well explained, well told, it is just brilliant!
@andrewjwentzel9349
@andrewjwentzel9349 3 года назад
That was the most helpful and simplest explanation! Thanks!
@capstone-switzerland3071
@capstone-switzerland3071 4 года назад
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.
@gianlucatiengo7306
@gianlucatiengo7306 3 года назад
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!
@hakana8597
@hakana8597 3 года назад
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?
@DanisPhotographe
@DanisPhotographe 4 года назад
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
@alainroos5383
@alainroos5383 3 года назад
short and to the point ! Thank you !
@christianek.963
@christianek.963 4 года назад
Thank uuu, I really needed this!!
@exogendesign4582
@exogendesign4582 3 года назад
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?
@malintha_prasad
@malintha_prasad 4 года назад
Worked 100% perfectly.. thank you verymuch !!!
@bhanukaweerasekara9474
@bhanukaweerasekara9474 3 года назад
It worked...! Thank you very much...! Keep up the good work.
@AlisonDurazo
@AlisonDurazo 5 лет назад
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.
@themiyajayakodi4052
@themiyajayakodi4052 2 года назад
Amazing Tutorial, no words to say
@mariocarnival
@mariocarnival 4 года назад
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?
@DaviePlaysGuitar
@DaviePlaysGuitar 11 месяцев назад
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?
@DavidAshby1
@DavidAshby1 2 года назад
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 ?
@khaledalkhder9110
@khaledalkhder9110 4 года назад
hi, is it free to use LightBox plugin as a commercial use?
@akaraonyestephen5516
@akaraonyestephen5516 3 года назад
you rock man !!! i subbed keep the good work up
@stevesass8184
@stevesass8184 4 года назад
Thank you for this tutorial!
@JelleRuben
@JelleRuben 5 лет назад
Nice video, but why two images of one picture? You can sizesed in the code? Or is the smaller images for the performance?
@mariocarnival
@mariocarnival 4 года назад
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...
@simonjolet4881
@simonjolet4881 3 года назад
Great Video, thanks a lot !! It helped me very well
@baykus790
@baykus790 3 года назад
amazing tutorial. i learned many cool stuff
@ArifHussain-gf2jz
@ArifHussain-gf2jz 2 года назад
My senior told me to create like this,and I got this awesome video, Many thanks for you valuable video 😊😊
@clevertechie
@clevertechie Год назад
I appreciate that, glad you found the video to be valuable!
@mileking74
@mileking74 4 года назад
Great video ! Helped a lot ! :)
@Misc_useful
@Misc_useful 2 года назад
Beautiful smart explanation
@darkerarts
@darkerarts 4 года назад
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.
@PanRobak.
@PanRobak. 5 лет назад
Thank you very much. That really helped a lot!
@ansmesserschmidt6124
@ansmesserschmidt6124 4 года назад
Thanks!! Its working great!
@negiday2759
@negiday2759 5 лет назад
thank you so much !really it helped me alot
@dev.regotube
@dev.regotube 4 года назад
best video!!!!!! helped me! thanks, man!
@sturgeburger
@sturgeburger 3 года назад
at 2:35 , how do you copy all the corresponding image tags without manually typing them??
@ashraffaly7915
@ashraffaly7915 3 года назад
Thanks a lot. Its very helpful.
@jelle1047
@jelle1047 3 года назад
This was really usefull for me thanks a ton!
@PavelKostal
@PavelKostal 4 года назад
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
@Dannythefirst
@Dannythefirst 3 года назад
Man you are the best of the best!
@aleksejsdzodzua1513
@aleksejsdzodzua1513 3 года назад
Thank You for the tutorial!
@luciddoggo5094
@luciddoggo5094 3 года назад
How do you make thee small version of the images?
@andrewandrosow4797
@andrewandrosow4797 2 года назад
Hello! Nice work! Thank you very much!
@balajikrish5136
@balajikrish5136 4 года назад
Hello sir, how to make next and previous button in the image viewer visible.
@christinapergomet647
@christinapergomet647 4 года назад
Fantastic! Thank you very much for this!
@user-ih3qy6cl8l
@user-ih3qy6cl8l 8 месяцев назад
hi
@matty965
@matty965 4 года назад
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?
@silviafricova1779
@silviafricova1779 2 года назад
Really great tutorial, thanks a lot! You explain very well so I can´t wait to learn from you more. I subscribe.
@clevertechie
@clevertechie Год назад
Glad you liked it, thank you for subscribing!
@BamBam-je4yf
@BamBam-je4yf 4 года назад
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 -.-
@devsenarathpathirana5022
@devsenarathpathirana5022 5 лет назад
really Cool.. Don't Give-up Brother
@ashokk9289
@ashokk9289 2 года назад
Thank you sooo Much for this Excellent tutorial
@andrejpavic156
@andrejpavic156 4 года назад
I love this so so much!
@uriel6673
@uriel6673 5 лет назад
Thought I was going to practice some JavaScript but it’s still a good vid tho
@chippandenga6722
@chippandenga6722 Год назад
😂😂🤣 I saw your comment but was still curious. No is at all.
@pierfabio75
@pierfabio75 4 года назад
very good tutorial. Thank you
@ThrReAlMaDrIdBoY7
@ThrReAlMaDrIdBoY7 3 года назад
Thank you! Very good Video
@genewilliams6777
@genewilliams6777 5 лет назад
Great tutorial!
@JockimStbernard
@JockimStbernard 2 года назад
This was very usefull thanks for the great tutorial.
@donborjuto7321
@donborjuto7321 5 лет назад
What size in px are your small images?
@dan32663266
@dan32663266 5 лет назад
I did 200 x 200 which is a square his look like they might be 250 x 200?
@mrlevo27
@mrlevo27 3 года назад
is ist possible to use the lightbox with video too? i have a mixed gallery :/
@glimdark
@glimdark Год назад
which code editor are you using
@woelneberg
@woelneberg 2 года назад
When I added this my w3 style stopped working? Can't these styles be combined?
@rodrigoitit
@rodrigoitit 3 года назад
Awesome! Thanks for sharing.
@clevertechie
@clevertechie Год назад
Of course! Glad you found the video to be awesome!
@jonathancarter2347
@jonathancarter2347 4 года назад
All worked fine in VS code but when uploaded to GitHub, it functions but the nav images don't show. Ideas?
@kovacssandor796
@kovacssandor796 3 года назад
change your images directory name to "images" and put inside all of your images
@bayareakidsclub5999
@bayareakidsclub5999 3 года назад
How did you copy and paste all of the images to insert into html?
@nashaatsalah7872
@nashaatsalah7872 3 года назад
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?
@vice2381
@vice2381 5 лет назад
Very interesting. Thanks.
@niharkashyap3897
@niharkashyap3897 4 года назад
Can i use this for videos as well?
@freektom8277
@freektom8277 2 года назад
Nice Thank you so much, my question is, how to change the background color of the entire gallery to black??
@jonathancarter2347
@jonathancarter2347 4 года назад
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
@glimdark Год назад
which code editor was he using
@MohamedAli-qt2vh
@MohamedAli-qt2vh 3 года назад
Thanks great tutorial :)
@GrantDavis
@GrantDavis 3 года назад
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...
@VideosByBob
@VideosByBob 5 лет назад
You are my hero!
@gothfrog69
@gothfrog69 Год назад
Thank you, sir!
@dennisasamoah2213
@dennisasamoah2213 2 года назад
was really helpful
@sk3424
@sk3424 2 года назад
thank you so so much , you are the best , saved my life bro!!!!
@clevertechie
@clevertechie Год назад
you're welcome brother man, glad I could help!
@sukronjazuli
@sukronjazuli 5 лет назад
thank so much.. very help me
@tang3151
@tang3151 4 года назад
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.
@abctrading8721
@abctrading8721 2 года назад
This is it. This is the video. Thanks
@isaiahmiguelbronola3966
@isaiahmiguelbronola3966 5 лет назад
nice video. very informative
@rottenblade4238
@rottenblade4238 5 лет назад
will u please make a video on creating dynamic header using javascript
@UsaM
@UsaM 5 лет назад
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
@lirigzonizeti7143 4 года назад
dude u should have in the same place photos and file u created otherwise the photos doesnt work
@elyorbekaliev4005
@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
@matyastoman8569
@matyastoman8569 3 года назад
Very nice tutorial
@andreigodunov330
@andreigodunov330 3 года назад
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
@andreigodunov330 3 года назад
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 )
@Eddycoolbiscuits
@Eddycoolbiscuits 5 лет назад
The image doesn't load. I click it and a black screen shows up. Can someone tell me what went wrong?
@devikag2641
@devikag2641 5 лет назад
after adding data-lightbox i m not able to open the images any solution
@karuvifoundation2857
@karuvifoundation2857 3 года назад
how to implement this in blogger.. cant able to add lightbox css to blogger.. help needed..
@yaminishrestha
@yaminishrestha 3 года назад
How to change the place of prev next and close button??? And how can we add title of the image??? Please help
@pluis1570
@pluis1570 5 лет назад
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
@pluis1570 5 лет назад
@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
@adrianmoser2295 5 лет назад
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
@KostasNezis 5 лет назад
@@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
@pluis1570 5 лет назад
@@KostasNezis have you changed the path in the lightbox.min.css file ?
@alliwell2075
@alliwell2075 5 лет назад
@@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/
@inesreisx
@inesreisx 4 года назад
hi, this looks very good, is it mobile friendly?
@danishmirza5857
@danishmirza5857 4 года назад
Well good but at the last my gallery img did not show next previous buttons
@oricketts5076
@oricketts5076 3 года назад
Can you change caption font/size?
@z4a
@z4a 2 года назад
Wawo Amzaing Just simple step..
@saneichavakkadan2
@saneichavakkadan2 4 года назад
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
@gatzestreicheln3226 4 года назад
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
@sholaidowu7660 5 месяцев назад
where is the folder name bit @@gatzestreicheln3226
@KuKu_RuKu88
@KuKu_RuKu88 4 года назад
Super. Thanks
Далее
Simple Image Lightbox Tutorial
14:04
Просмотров 78 тыс.
HTML, CSS, and Javascript in 30 minutes
31:49
Просмотров 538 тыс.
Why You Should Always Help Others ❤️
00:40
Просмотров 4,8 млн
WOW... WHAT A FIGHT!!!!! 📣 #ufc302
00:48
Просмотров 1,1 млн
Заметили?
00:11
Просмотров 2,7 млн
How To Create An Image Slider In HTML, CSS & Javascript
24:42
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Просмотров 455 тыс.
Create a CSS only lightbox using :target
34:08
Просмотров 68 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 892 тыс.
How to sign the letter J?❤️
0:47
Просмотров 56 млн
Sprinting with More and More Money
0:29
Просмотров 82 млн
Forging a cool BBQ Fork
1:00
Просмотров 19 млн
My Family ❤️
0:29
Просмотров 926 тыс.
Яжемать в скейт парке !
0:24
Просмотров 1,8 млн