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.
! M, g9 k- N- {! V
Images, iframed or inline content etc. can be displayed in a overlay above the current page.

+ U& r6 l: \& T* u* M
5 g# a' P& f6 v8 n5 Z
% F) Q/ y$ p4 j. o* [$ e


6 B& ]# V- V& n4 s; o
Features
7 u. D3 K3 L* Z$ a* _% p2 i6 YThe 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.
# ^  M  y& F8 k; `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
  ~) B/ u& y* OThe Colorbox plugin:

Supports images, image groups, slideshow, ajax, inline, and iframed content.
1 _0 w, T1 o# E+ ?7 `+ t( P! y0 aAppearance is controlled through CSS so users can restyle the box.
$ D) q/ J* f' q- ]! o, UPreloads 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.
: @9 M- k0 P- ]  g5 _
5 K7 o1 n+ [7 c& o1 [0 kGo to Modules and enable the Colorbox module.

7 ^8 m) i- L! P# i& q( i4 EDownload and unpack the Colorbox plugin in “sites/all/libraries”.
  b4 V8 ^* U' U! S, P5 lLink: http://colorpowered.com/colorbox/colorbox.zip
; o' K( _  Y& o9 Y- uDrush users can use the command “drush colorbox-plugin”.
7 w& K, o9 p; g9 f) t
. F) _+ ]' Z4 L" M7 ]8 l( n) SAdd two new presets by clicking on configuration-> Media ->Image Styles.

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

/ [2 B) H; x2 Z. nOne preset will used for the preview image and the other one we use for the full image to be shown on colorbox.
- H: Z1 o# }! ]7 Y
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.

) {9 S. q1 K. r/ q0 f3 r* ZAdd some images to the new content type we just created.
# B' o6 Y3 ^/ J/ g! M& b
/ ~9 q+ ]3 g3 ~$ D/ S, kCreate a view give it a name and continue with the default settings.
! b7 l6 o! _$ J

9 p& Y! p" k6 k+ Q
Apply the filter criteria by choosing the content name as the filter.

Now select fields to display in the view.

. R$ c8 i% h! x* H/ j2 N. gSelect Content Title and Content : Image Field Name as the fields.

" }1 w2 s* n4 KIn the Image Field Name settings page enter a label name for the field.
5 f( {- i$ F& h7 P4 {
% x6 B, q6 A8 D/ d2 L3 ]& WIn the Formatter dropdown select the Colorbox option.
9 g8 i: }* r/ ]# q1 z
In the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.

" P/ G4 @( b1 t- b& `; _8 NIn the Colorbox Image Style select the name of bigger image style.

, S! P* K2 G0 U) W& f; e; [Click save and save the views also.
7 Z" ]/ g, Z% {5 c, v( O
Now go back to the content type we have just created.
: P& j4 g8 F9 O& l+ L( P- jClick on Manage Display Field.

Next to Image field is a dropdown labelled as Format.

0 h; i7 o- {# ^4 a. C3 cSelect Colorbox and configure the settings for the field.
+ x- ]& r8 R; o
# W9 g% P! x2 d1 |$ aNode Image Style : Smaller Image style.

Colorbox Image Stye : Large Image Style.

Click Save.

7 T: d" n6 |; J' O8 xNow you can see your images in a colorbox by clicking on them.

* i! l& s+ e* s  MYou 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.


5 S  L- p, C5 A2 O+ L) b