Build a gallery with Colorbox - jQuery Tutorial

- [Voiceover] One of the great strengths of jQuery is the enormous ecosystem of plugins that are available. In this video and the next several we're going to work with one plugin in particular, Colorbox. So here on my Hansel and Petal example site, I have several thumbnails of these flowers. And if I click one, it opens a larger photo of the same kind of flower. This is fine. Of course the flowers look nice. But it would be nicer to be able to open that image in the context of this page without navigating elsewhere. Basically opening it in a lightbox. And that's what Colorbox can do for us. Here's the Colorbox website at jacklmoore.com/colorbox. And there are several examples of what we're talking about here. So I'll just go to the first one. There we go. No doubt you've seen these before but Colorbox is a really well done, very well supported version of this lightbox. So what we're going to do is download this and install it in our project. To get the latest version of Colorbox, I only need to click this friendly Download button and then the file ends up in my Downloads folder. So here I have this zip file in my Downloads. You can leave it as is or you can just rename it to Colorbox, which I like to do, and then drag it into your project. Now taking a look inside the Colorbox folder I can see I have a bunch of different stuff in here but what I am particularly interested in is this minified version of the Colorbox plugin file. This is what I want to install. Canonically most plugins use jQuery. and then the name of the plugin. So there's the readable version here if you're curious and then the minified version for use in production. This is what we'll use. So I'm going to select this file name and copy it and I'm going to open my index.html file. Here I am in this file and I'm going to use command + down arrow to scroll all the way down to the bottom. This is where most of my script tags live. I'm going to add a new one that will refer to Colorbox. I installed it in a folder called Colorbox right in my project folder. So I'm just going to set the source to colorbox/colorbox.colorbox-min.js. Close that script tag. Now with many jQuery plugins, having done this you're done and the plugin is usable in your project. Some plugins will also require or at least recommend that you use a built-in CSS file. Colorbox provides several of these in these example folders. They're all called colorbox.css. If you wanted to use them, you could just add a link tag to the top of your file in your head tag to reference that CSS file. Now as it happens with this particular website, it's used Colorbox before. I've taken it out so we can go through the process of installing it but there are already some existing styles. So we don't have to do that step. But take a look in your plugin to see if there are styles that should be brought in as well as the actual jQuery code itself. So at this point we have Colorbox installed and we can check in the browser to see if it actually works. So I'm going to reload this and open my JavaScript console and now I can do $.colorbox and there it is. Colorbox happens to add a few methods directly to the jQuery object. A lot of the times it'll be in fn. So at this point we haven't actually done anything with Colorbox, but we've confirmed that we've installed it correctly and we can proceed from here. Colorbox is hardly the only game in town. There's another one called Magnific or Magnifique, I'm not sure, Popup, that's another take on the lightbox plugin that you might also like to check out. It's responsive and works with jQuery or Zepto. Its API is a little different. It's a little more difficult to use in my limited experience with it but it is very nice and worth looking at. So with that we're going to proceed with Colorbox and actually start implementing it on our example site.