How to use Colorbox module in Drupal 7?

Most of you have heard of Jquery Colorbox Plugin. Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.3 through 1.6. In Drupal 7 colorbox jquery plugin is integrated with a module Colorbox.

Images, iframed or inline content etc.

can be displayed in a overlay above the current page.

Features

The Colorbox module:

  • Excellent integration with Imagefield, Imagecache, Insert and Image modules
  • Choose between a default style and a number of other styles that are included.
  • Style the Colorbox with a custom Colorbox style in your theme.
  • Option to open a login form by clicking on any login link
  • Drush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file

The Colorbox plugin:

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

Now lets use the colorbox module to show content images in a colorbox.

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

Go to Modules and enable the Colorbox module.

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

Add two new presets by clicking on configuration-> Media ->Image Styles.

Set the height and width of the presets accoiridng to your requirements.

One preset will used for the preview image and the other one we use for the full image to be shown on colorbox.

Save both the image styles.

Create a new content type.

Add a 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 save.

Add some images to the new content type we just created.

Create a view 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.

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.

In 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.

In the Colorbox Image Style select the name of bigger image style.

Click save and save the views also.

Now go back to the content type we have just created.
Click on Manage Display Field.

Next to Image field

is a dropdown labelled as Format.

Select Colorbox and configure the settings for the field.

Node Image Style : Smaller Image style.

Colorbox Image Stye : Large Image Style.

Click Save.

Now you can see your images in a colorbox by clicking on them.

You can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.

With Colorbox plugin we can do lots of stuff with the images. This is the basic one to begin with. In the next post I will try to bring some advance usage with the Colorbox Plugin.

Comments
  1. jen
    • Trish
  2. Ronald Bendure
  3. Roho
  4. Travis
  5. Wiley Payes
  6. bisuteria
  7. Paet
  8. Puja
  9. Puja
  10. Arun
  11. Arun
    • Ghan

Leave a Reply

Your email address will not be published. Required fields are marked *

*