I've seen a few other tutorials on TH-cam for this Lightbox feature, and this video is by far the best one and easiest to follow. Love how everything is explained. You sir, have earned a subscriber.
Excellent tutorial! And bless you my son, for just skipping past the "now I'll type the same code for the next 20 list elements and make you endure my typos for five minutes." :-) Seriously, I'm looking at all kinds of code tuts, and this one stands out. Very well done.
Brad this really helped me out in a freelance project, all the gallery/lightboxes i tried looked bad on mobile, this one works best. And in the course you provide your students the code, thank you!
I was trying to make something like this for the last 2-3 months and wanted to give up but this video helped me so much thank you very much for explaining so well!
Thank you for posting this tutorial it was just what I wanted and is the best one I have done by far I will take a look at your site to see if you do slider I have done a few tutorials and can't get them to work, so doing this tutorial has lifted my excitement again thank you 🤓🤓
You're a great teacher Brad Schiff! Every time I watched your videos I learn a lot of Diskarte (means moves). I have question regarding the "group" class you have used in the image wrapper. What's the used of it and what's the behavior/attribute of this class? Is it for clearing floats?
Awesome tut! I was wondering if I could add a sidebar to my modals to have say a, h1 tag, a p tag, and button. Is this possible? I want to give a description and button to link to another site.
For those of you who are having trouble, have a look at index.html in examples folder and you need to use files from the dist folder NOT from the src folder
Awesome! I was just about to start a new project that needed one of these, but it looks like this premade script is going to be so much quicker and easier than coding it from scratch! One question though, are the lightbox popups responsive?
What if you want to create a logo grid to modal info box solution? I have Ultimate VC Addons which has a modal window, but there doesn't seem to be a way to link it to a grid of logos.
Great video, thank you for your efforts. What about having many of one product image with different angles, sort of like a product will show in you shopping cart? anyone can help with that?
Great video! Thanks! One question though... When I view my page in Chrome, Mozzila and Opera, the "next", "previous", "loading" and "close" images in lightbox are not showing. Do you know how to resolve this problem?
@@norewall Hi Gabriella.... well, actually I did solve the problem... I remember I had to spent quite some time figuring it out, but in the end I managed to do it. Unfortunately, since I did that 3 years ago, I forgot what I actually did. I checked the code on my website... I use a JS script for the lightbox and the file is called "lightbox-plus-jquery.js". I found it somewhere on internet. Do you have the source code with the same name?
Hi @@FORMANNesque! Thank you for your answer! Yes I have it! Luckily I could solve the problem on that night when I wrote you. I had a problem with the image folder ... ˇˇ I think it is better if I don't describe what I think about this ... xD Thanks again! :)
@@norewall Well, the most important thing is that you've managed to solve the problem. :) Kudos to you! Yes, there are always these small details that make problems, especially with things such as these. I know I've had so many problems like this one while working on my project. :) Anyways, thank you for replying. :) Cheers! :D
Hi there!! Really really good tutorial!! :D I have a small problem.....the box-sizing in CSS file, won´t work. I can´t use it "the property is market invalid because it´s not supported by the current schema". I can´t see the problem..... Any ideas?
thank u soo much... grt tutorial... :) i have one ques. .... how to create image into thumbnails.. is their any software for this or i have to reduce image size in any editor ..??
I cant see the x in the lightbox and the code is all there. My websites folder is called "www" and i have those buttons in a folder called images and then put code url(../images/close.png) any help?
Instead of hard coding the images individually in code, is there any way to add the whole folder? If it is, then how to write the code for lightbox? Waiting for your professional guideline.
Nope, couldn't get it working. Even if you didn't fix the calls to the image img Image folder, whatever, it's supposed to be at least shadowboxing for you, but no dice.
+Muhammad Hilmi i did it , i also followed the video religiously but when im click on the images nothing happens, i think something with js file goes wrong. have u got any idea?
+Ioanna Moraiti before the tag, it should be something like this, depending on where you put the lightbox.js file. Other than that, I followed the video heart and soul.
Thanks! You've made what seemed like a huge task, less than an hours work. I was worried that integrating lightbox features into my pre-existing grid would be difficult but this tutorial was VERY helpful :) Sub sub sub
You may have figured out the answer to your problem already, but if you're asking about sectioning out images such as in, say, month and year. You just make use of the data-lightbox=" " part. Such as data-lightbox="June_2017" for whichever images are from June of 2017 and set data-lightbox="July_2017" for any images that are from July of 2017. However if you meant how to open an image into the lightbox view and then have a filter that you can flip through the categories, then I don't have an answer for you.
What am I supposed to type to jquery.js? You already have it there and I have no idea what it should containt and I also checked previous videos but I am lost. Can anybody help me with this issue please?
I've seen a few other tutorials on TH-cam for this Lightbox feature, and this video is by far the best one and easiest to follow. Love how everything is explained. You sir, have earned a subscriber.
Excellent tutorial! And bless you my son, for just skipping past the "now I'll type the same code for the next 20 list elements and make you endure my typos for five minutes." :-) Seriously, I'm looking at all kinds of code tuts, and this one stands out. Very well done.
This is the absolute best tutorial I've seen. You have a great talent for teaching- thank you!
Brad this really helped me out in a freelance project, all the gallery/lightboxes i tried looked bad on mobile, this one works best. And in the course you provide your students the code, thank you!
This is the best tutorial for lightbox on TH-cam!
I was trying to make something like this for the last 2-3 months and wanted to give up but this video helped me so much thank you very much for explaining so well!
Thank you for posting this tutorial it was just what I wanted and is the best one I have done by far I will take a look at your site to see if you do slider I have done a few tutorials and can't get them to work, so doing this tutorial has lifted my excitement again thank you 🤓🤓
Thanks!!! This is the only tutorial I have found that actually explained every detail in a easy way.
Wow, this is exactly what I wanted! I was just thinking yesterday "I need to learn how to do a gallery with a modal." Thanks!
If you are still having trouble running the script, include lightbox-plus-jquery.min.js instead. That will do the trick.
Yup, this did the trick for me, thanks man!
Thank you very much. I had same problem :) and I solve with this trick.
Thanks a lot....It was worth watching your video.....all was perfect.....once again ...enormous THANKS! Greetings from Serbia!
very easy and simple to follow... loved your style !
This is best tutorial forever for Photo gallery!!!
Hey, Thank You
I was finding this Working Modal very badly...!!
Also the way you Explained was Outstanding !
Awesome Tutorial !
Thanks for this video I was pulling my hair out with these other tutorials yours was way simpler and easier thank you :)
Another great tutorial! One question/request: how do I keep the prev and next arrows visible w/o hover?
Thank you so much for this. Simply a perfect tutorial!
Excellent tutorial. Very easy to follow along with.
very good tutorial, probably the best on youtube! thanks a million!
I came here because the W3 lightboxes don't work here, and coming out satisfied that I can use it. Definitely suscribing.
This is just awesome! You explained so well. Thank you!
Thanks a lot. I have got a valuable tutorial, you have described in depth and i understand very well.
Thank you so so much, the best and easiest tutorial to follow!! Liked and subscribed!!
Nice tutorial! Learned so much. Many thanks!
You're a great teacher Brad Schiff! Every time I watched your videos I learn a lot of Diskarte (means moves).
I have question regarding the "group" class you have used in the image wrapper. What's the used of it and what's the behavior/attribute of this class? Is it for clearing floats?
Hello Sir, Thanks a lot for your great tutorials. Its been so helpful for me.
Awesome teaching man ! keep it up !
Awesome tut! I was wondering if I could add a sidebar to my modals to have say a, h1 tag, a p tag, and button. Is this possible? I want to give a description and button to link to another site.
Such a good tutorial. Very well explained.
Brief and nice explanation, thanks!
For those of you who are having trouble, have a look at index.html in examples folder and you need to use files from the dist folder NOT from the src folder
How do you stop very large images being bigger than the viewable area?
Great video, shame videos do not get posted on here more often.
Great video as always! Is there a way to have image thumbnails instead of circles for the gallery navigation?
Thanks...very nicely explained...keep posting vids...more like this objective based
Awesome! I was just about to start a new project that needed one of these, but it looks like this premade script is going to be so much quicker and easier than coding it from scratch!
One question though, are the lightbox popups responsive?
Is it possible to add button or icon over the images?
my lightbox.js doesn't work. I attached jquery too. does it matter what jquery I attach. I have 1.1. Is 2.2 necesary?
amazing tutorial!!! thx very much and please don't stop teachng!
Explained perfectly! Thx a lot!
What if you want to create a logo grid to modal info box solution? I have Ultimate VC Addons which has a modal window, but there doesn't seem to be a way to link it to a grid of logos.
Super Teacher, Amazing !
simple, clear, easy to follow Thanks!
Amazing tutorial!!! i love it! thx very much
Great video, thank you for your efforts. What about having many of one product image with different angles, sort of like a product will show in you shopping cart?
anyone can help with that?
Many thanks indeed!!! Awesome tutorial...
Great video! Thanks!
One question though...
When I view my page in Chrome, Mozzila and Opera, the "next", "previous", "loading" and "close" images in lightbox are not showing.
Do you know how to resolve this problem?
I have the same problem. Could you find the solution?
@@norewall Hi Gabriella....
well, actually I did solve the problem... I remember I had to spent quite some time figuring it out, but in the end I managed to do it. Unfortunately, since I did that 3 years ago, I forgot what I actually did.
I checked the code on my website... I use a JS script for the lightbox and the file is called "lightbox-plus-jquery.js". I found it somewhere on internet.
Do you have the source code with the same name?
Hi @@FORMANNesque! Thank you for your answer! Yes I have it!
Luckily I could solve the problem on that night when I wrote you. I had a problem with the image folder ... ˇˇ
I think it is better if I don't describe what I think about this ... xD Thanks again! :)
@@norewall Well, the most important thing is that you've managed to solve the problem. :) Kudos to you!
Yes, there are always these small details that make problems, especially with things such as these.
I know I've had so many problems like this one while working on my project. :)
Anyways, thank you for replying. :)
Cheers! :D
Just Awesome. I like it very much.
do have any idea for videos? using light box
this is so awesome and inspiring.
Hi there!! Really really good tutorial!! :D
I have a small problem.....the box-sizing in CSS file, won´t work. I can´t use it "the property is market invalid because it´s not supported by the current schema". I can´t see the problem..... Any ideas?
excellent tutorials,thanks ...subscribed
Max Payne Mine doesnt workkk please help
Max Payne My one becomes smaller but it works just like his when i didnt have the lightbox javascripts
i dont know worked fine for me .i used the same image as thumbnail and for high resolution.i used bootstrap and here is code :
Max Payne Dw i tweaked lightbox.css to make the modal view smaller.
thank u soo much... grt tutorial... :)
i have one ques. ....
how to create image into thumbnails.. is their any software for this or i have to reduce image size in any editor ..??
you can use paint software in your computer, no need for massive programs or edits
I cant see the x in the lightbox and the code is all there. My websites folder is called "www" and i have those buttons in a folder called images and then put code url(../images/close.png) any help?
Finaly found a good tutorial.
thank you so much !!!!
You re a great teacher !!!
Instead of hard coding the images individually in code, is there any way to add the whole folder? If it is, then how to write the code for lightbox? Waiting for your professional guideline.
thanks a lot! I like your teach style
Hi! does this work with mp4 videos? how?
i tried adding but didnt work.Do u have any idea?
Search for blueimp gallery, they have something like this in demo.
Nope, couldn't get it working. Even if you didn't fix the calls to the image img Image folder, whatever, it's supposed to be at least shadowboxing for you, but no dice.
Really Great tutorial! Thank you so much master. You are great!
If you guys have been following the video religiously and still didn't work, try to include the at the bottom of your page before the closing tag.
+Muhammad Hilmi i did it , i also followed the video religiously but when im click on the images nothing happens, i think something with js file goes wrong. have u got any idea?
+Ioanna Moraiti before the tag, it should be something like this, depending on where you put the lightbox.js file. Other than that, I followed the video heart and soul.
Thank u,I found it, I had wrong path to the js file:))
Thanks!
You've made what seemed like a huge task, less than an hours work.
I was worried that integrating lightbox features into my pre-existing grid would be difficult but this tutorial was VERY helpful :)
Sub sub sub
awesome tutorial thanks!
I've just followed the step until 8:00 but still doesn't work. Is anyone have a clue to help me? Thanks in advance.
I change lightbox.min.js to lightbox-plus-jquery.min.js and it's work.
can you please send me the code .
nice video with clear voice thanks a lot bro
How can we make it responsible? (sm 1 column, md 3 column, xl 4 column)
You are the best, thanks !!!
How and what do I do fi I want to show video
very well explained
Thank you ..! Great tuturial
do we need to inclue jquery for this to work?
Hello everyone! Who knows where is the link of ‘ ...zip file ‘ ? I can’t find it. Thank you so much.
Excellent :) Thank You so much .
Anyone know how to filter images by categories and still be able to slide through the images only by that category?
You may have figured out the answer to your problem already, but if you're asking about sectioning out images such as in, say, month and year. You just make use of the data-lightbox=" " part. Such as data-lightbox="June_2017" for whichever images are from June of 2017 and set data-lightbox="July_2017" for any images that are from July of 2017.
However if you meant how to open an image into the lightbox view and then have a filter that you can flip through the categories, then I don't have an answer for you.
how can we add lightbox to images inside a tab?
Good explanation.. thank you.. :)
Super, need time to dig in, am really a greenhorn at the very start.
Lovely! Thanks a lot!
Is it working with jQuery 3.x?
Couldn`t find project`s zip. Please, tell me where is it?
nice tutorial buddy thank you...!!!!!!!!!!!!!!!!
Can you give the link to the jQuery file? i can't find the right one
Thanks for this great tutorial!!!!!
is it necessary to use thumbnail images
cant we just reduce the size of image on website???
Hey this is awesome I love it
OMG, YOU ARE GOD! Thanks for the lessons!)
how do you open lightbox at pageload
how can i make it on wordpress
I can t put more than 17 images in gallery. Please help... Thank you
What am I supposed to type to jquery.js? You already have it there and I have no idea what it should containt and I also checked previous videos but I am lost. Can anybody help me with this issue please?
Look up google hosted libraries. You should find your answer there
Is there a way to use Word Press without HTML?
i hope u can teach me from how to make the grid to here,, even the lightbox i downloaded it is abit different with the tutorial u shown :(
thanks a lot. but firefox don't support it. how I can solve this problem ? )
The second image on first bit doesn’t load
i cant put a .png file in the images folder
What is window lightbox
How to make it responsive?
very helpful thank you very much
Where can i download this lightbox javascript file?
lokeshdhakar.com/projects/lightbox2/ this is the official & original file that was used in this video.. have fun
Thank you
No problem (Y)