Join Joe Chellman for an in-depth discussion in this video Build a gallery with Colorbox, part of jQuery for Web Designers.
- [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.
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.
- When to use jQuery
- Installing jQuery
- Setting up functions
- Using jQuery classes
- Modifying the DOM
- Event binding
- Reading and setting values
- Integrating plugins
- Animating websites with jQuery