Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
Skill Level Intermediate
Not to sound like a book and record but I really quite like Colorbox. It has a lot of options and in this movie, we are going to take a look at some of those that you can use to customize this very easily. So, when I open this Colorbox and then paging through, everything is cool. What happens if I collpase this window down. The Colorbox is still really big, it does not adapt to the size of my window. I don't like that very much so we're going to change that. First I'm going to look at the file and scroll down to my Colorbox. Pay no attention to what's commented out for the moment; we're just concerned with the actual implementation that's on the page right now.
You'll find these usually under settings or options, and as you can see, if we just scroll there are rather a lot of them, so these are nicely grouped but what I'm looking for is something relating to the width of the window so let's just search for a width. Okay the first thing that comes up is scale photos, so reading this it looks like Colorbox will scale the photo's down if I set some width parameters. Okay that sounds promising, so we're going to remember this what else do we have, dimensions okay we have width, inner width and max width. We also have some default values in this second column.
Alright, this looks really good. I'm going to grab this max width, because that's what I want. I don't want the photos to be any larger, but if they can be as large as they actually are, that would be good. So I want a max width. Let's copy this and switch back over here. So I'm going to add some more keys and values to my object. You can see that this first one was not a string. For consistency sake I'm going to make it into a string like the other ones. Most properties will work either way. So I want my max width to be say, 90% of the window. That way it just won't get any bigger and they'll be a little bit of room on the sides.
And then I also remembered that there was that scale photos, which will make sure that the photos scales down to fit within this. So I'm going to set that to true save this and switch back, okay. I'll reload, now at this window size everything looks good and it doesn't scale down immediately, although it does move a little. So let me shrink my window and try this again very nice now it responds to the width of the window and keeps everything nicely in place and this works for all of the photos. Excellent. So you can use all of these options, and customize this thing to your heart's content.
If you look at the examples, and then View Source on this page, here are a bunch of settings that have been used to create these different Colorboxes in these different states. I want to show you another few examples of how you can use these settings to do interesting things. So I'm going to comment out this first section. And then start bringing out some of these that are in the other comment so that they'll actually work. So I'm just applying Colorbox to the first list item that's a child of flower items and then grabbing its link. And in this case I'm using the href element to pull in the content of a stub HTML file.
So instead of loading an image, instead of referring at all to the href attribute of that anchor, I'm just loading whatever I want. So let's see what that looks like. I save this, switch over to my browser, and reload. Wait a second, this content failed to load. Let's look at the console, see what happened there. I'm running into this dread axis control allow origin error. Basically, this is a security protocol where the browser is trying to stop you from loading something from an unknown website. Chrome is pretty strict about this. To get around this, for now, we're going to switch over to Safari.
The current version of Safari does not implement this in the same way because it recognizes that, with the file protocol, I'm just loading another local file. So it's probably fine. And the example loads. Now, of course, this Colorbox is way too wide so I'd need to adjust some other options to make it look nice, but it does load. If you're using Firefox, you'll also see the example works there, at least of the current version. But if you do want to use Chrome you can still get this example to work if you load the files either onto a web server on the internet or if you use a local web server.
You can learn about that in the course installing, Apache, MySQL and PHP here on lynda.com. If you are using a Mac you could use something like Memp or XANP, that's XANP on other platforms. There are various solutions like this that work for you that will allow you to load up a local web server and get around that area that happens in chrome. Turning to some of these other examples. Get this one up, pull this one back in, this is acting on the second item and instead of pulling in something from an external file, I'm actually setting the HTML of the Colorbox manually so let's save this switch over to Chrome and look at it.
I reload, click the second item and here we are. Now the styles are a little messed up, we'd need to adjust this, but you can see that I can set the content of the Colorbox manually. That's pretty interesting. And then last, we can add these in at the same time, I'm grabbing the third item and this time opening a video from YouTube. And I have to set several options for this to work correctly. First I have to set the href so it pulls in the video from YouTube. I need to tell Colorbox to load this as an iframe because it's coming from an external website. And then I'm choosing to set the width and the height because I want the video to appear at a certain dimension.
All of these options are available on the Colorbox website. So let's switch to Chrome and reload, try it out. And there we go. This is a free sample from a course here on lynda.com that you can see over on Youtube. So you can see that not only do these options change the appearance, I can drastically change the content that's available in my Colorbox. So with the combination of J query's powerful selector engine and then Colorbox's powerful options, you can take almost anything on your page and load it into a light box.