jQuery for Designers Beginner's Guide

Customizing Colorbox's behavior

If you take a look through the Settings section of the Colorbox website, you'll see that you have plenty of options for customizing how the Colorbox behaves. Let's take a look at how we can put some of these options to use. For this section, we'll keep working with the files we set up in the previous section.

Transition

First up, we'll try out the different transition effects that are available. The default transition is elastic. If your full-size images are all different sizes, you'll see that Colorbox uses a nice resizing animation to transition between them. The other options for transitions are fade and none. Let's take a look at how we can modify the transition.