Drupal 7 - The basic way of using the Colorbox module

This article is about the usage of Jquery Colorbox Plugin, which most of you must be either accustomed to or at least heard of. This post is aimed at those who know about the module, but still haven’t made the use of it. So, here’s what to begin with.

The Colorbox module is a light-weight as well as customizable lightbox plugin for jQuery 1.3 through 1.6. When it comes to Drupal 7, the colorbox jquery plugin is integrated with a module Colorbox. The usage of this module facilitates the display of images, iframed or inline content etc. in an overlay above the current page.

Features of the Colorbox module

Let’s take a brief look at the various features of the Colorbox module. The following are a list of its features:

1. Outstanding integration with Imagefield,  Imagecache, Insert and  Image modules.
2. A variety of choice is available between a default style and a number of other styles that are included.
3. The facility of styling the Colorbox with a custom Colorbox style in your theme is also present.
4. There’s an option to open a login form by clicking on any login link
5. Drush command is available to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file

Features of the Colorbox plugin:

• Supports images, image groups, slideshow, ajax, inline, and iframed content.
• Preloads background images and can preload upcoming images in a photo group.
• Appearance is controlled through CSS so users can restyle the box.

Showing content images in Colorbox

Having discussed the features of the module, let’s move on to make use of the Colorbox module in order to show content images in a colorbox.

Step: 1

Download the Colorbox module from drupal.org and place it in sites/all/modules folder.

Step: 2

Now, go to modules and then enable the Colorbox module.

Step: 3

Download and unpack the Colorbox plugin in “sites/all/libraries”.
Link: http://colorpowered.com/colorbox/colorbox.zip
The Drush users can use the command “drush colorbox-plugin”.

Step: 4 

You’ll have to add 2 new presets by clicking on configuration-> Media ->Image Styles.
Set the height and width of the presets according to your requirements.
While one preset will be used for the purpose of preview image, the other one will be use for the full image to be shown on colorbox.
Save both the image styles.

Step: 5

Now, create a new content type, and then add an image field to it.
Select the image preview style name we just created in the image styles. Here we will use the smaller image to be shown on the listing page. Click on the save option.
Add some images to the new content type we just created.

Step: 6

After this, create a view and give it a name and continue with the default settings.
Apply the filter criteria by choosing the content name as the filter.
Now select fields to display in the view.

Step: 7

Select Content Title and Content : Image Field Name as the fields.
In the Image Field Name settings page enter a label name for the field.

Step: 8

Now, from the Formatter dropdown select the Colorbox option.
In the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.

Step: 9

In the Colorbox Image Style select the name of bigger image style.
Click save and save the views also.

Step: 10

Here, go back to the content type we have just created and then,

Click on Manage Display Field.

Next to Image field you’ll be able to notice a dropdown menu labeled as Format.

Select Colorbox and configure the settings for the field.

Node Image Style: Smaller Image style.
Colorbox Image Stye: Large Image Style.

All done, now click on Save.

After following all the above mentioned steps, you should be able to see your images in a colorbox by clicking on them.

You can also choose to use the Colorbox Stylesheets. All you have to do is to simply copy the whole folder into your theme folder and then include it into your template files.

The Colorbox plugin is very useful and we can do a lot of things with the images with the help of this module. Hope we were able to deliver the idea of the basic stuff to begin with through this post.