Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Using jQuery, you have access to a vast number of plugins made by developers all over the world solving all kinds of web design problems. Here, on this example site, I have a variety of photos of different flowers. And if I click one, I can see that flower in the context of an arrangement. This is nice but it could be better. I don't like having to go to another page to see this. So, these days, using a lightbox type plugin is way to make this nicer. Where the larger image appears in an overlay right here in the context of the original page.
So in the movies we're going to look at Colorbox, which is a jQuery plugin that I really enjoy for solving this kind of problem. Here it is, on jacklmoore.com. Colorbox is a very well done and well-supported plugin. If you look at the Changelog, you'll see that it is updated constantly. Let's take a look at some of the demos, so here are various demonstrations of Colorbox in action, and as you can see, you get an overlay, and you can page through a variety of photos. This is just a ticket, and there are lots of different ways that this can be used, there is different kinds of transitions between them, you can fix the dimensions.
Basically colour box allows you to change just about anything you might want to in your Lightbox, without having to modify the code or do a whole a lot of extra work It's also very theme-able. You can make it look just about exactly how you want with just CSS and some images perhaps. So we're going to use it here on this page. The first step in using any jQuery plugin, of course is to install it. So let's get a copy of it. I'm going to download this, and he has a link right from GitHub. And it sends it right into my downloads folder. And here we are, my downloads folder.
I'm going to change the source. And the name of file is jQuery.colorbox-min.js. Okay, so that's in. (NOISE) Now let's go back to this page, and just look and see how we start using it. Okay, so there's jQuery$.colorbox. So I should have a colorox method available in jQuery if I've done this correctly. So I'll go back to my colorbox.html file loaded in my browser. We reload. Now, without getting into the implementation details just yet, of how to use Colorbox on elements on the page.
I can just check for it's existence to make sure that I haven't installed it wrong. First by looking to see if there are any errors here in the console. They're aren't, so that's good. And then I can type the $., and start typing the name of the method. And there it is, Colorbox. Okay, great. So I know that Colorbox is available, once I start to try and use it. I've at least gotten this far without mistakes. And this procedure works for just about any jQuery plugin that you might be interested in. In this case, we're working with a site that was built for another course, which is called Applied Interaction Design here on lynda.com. And this was built as if it were for a real client.
So if we go back and look at the file, you could see that there's obviously a lot of other jQuery here. Including this line, which says plugins. This contains a bunch of jQuery plugins all squished into one single file. And in the original installation of this, Colorbox was one of those plugins. I've broken it out for our purposes. And for the purpose of subsequent lessons, you're going to see it in a different location. It's going to be here in the js folder, along with the other plugins. So it'll be jQuery.colorbox-min.js. And it's going to be here instead. Because that's where I've provided it for you in the exercise files.
And when you're working with any plug in, you're just going to install them like this, and get started using them. So going forward, we're going to actually start using Colorbox for real.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.