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.
# d+ _0 [6 G) M8 T' t2 `" r! o1 e
Images, iframed or inline content etc. can be displayed in a overlay above the current page.
- h8 e6 \# i  J* E9 l8 V- I


# J: B" m$ U8 q+ _4 \



* b2 }7 i0 p0 V" q3 R( s, W" KFeatures
# Z0 l6 A( o" H" qThe Colorbox module:
, ~" T5 t2 I! u- l
2 W- C  A: F" a/ v) xExcellent integration with Imagefield, Imagecache,Insert and Image modules
# W. N% a2 n1 [. D, q' Q8 `Choose between a default style and a number of other styles that are included.
6 h; ^% S3 @1 I% v7 R8 V1 Q$ w# SStyle the Colorbox with a custom Colorbox style in your theme.
% b0 H7 Q# ^  v# g* O1 z  A( bOption to open a login form by clicking on any login link
$ G/ f" b% B% j4 g4 i" }* E/ `8 DDrush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file
The Colorbox plugin:

$ s# B& N: b1 Y9 F# sSupports images, image groups, slideshow, ajax, inline, and iframed content.
Appearance is controlled through CSS so users can restyle the box.
8 P" j7 t$ `% ?4 iPreloads background images and can preload upcoming images in a photo group.
5 b8 d5 D+ P5 A$ \* NNow lets use the colorbox module to show content images in a colorbox.
; k- j; y. g6 Z2 g# `+ X
Download the Colorbox module from drupal.org and place it in sites/all/modules folder.
# y, o, ]. y# U+ T) h
3 @7 L: b! S2 Y7 {) G/ `Go to Modules and enable the Colorbox module.
9 w" a1 V6 q; D* d8 |0 N. K4 V
1 ^. B1 s2 u: DDownload and unpack the Colorbox plugin in “sites/all/libraries”.
/ S6 Y8 p& O9 w4 wLink: http://colorpowered.com/colorbox/colorbox.zip
' A9 ?/ Y, P) Y- f& u4 \! T9 |( x: UDrush users can use the command “drush colorbox-plugin”.
4 X6 J! u, I9 p1 `- @$ P
5 r0 s  y! r1 {# H4 DAdd two new presets by clicking on configuration-> Media ->Image Styles.

( ~( @' l2 G# f- o9 Q$ QSet 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.
1 p( V# H, v( x( ^$ Y( @( ?
Save both the image styles.
9 ^, m( @  h9 I' L) Z5 j/ I
Create a new content type.
( K+ m1 O7 ^& K% b# P/ P1 W
Add a image field to it.
2 v+ P7 X6 x, l. h( \
% i  E0 s! x, rSelect 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.

! ~% V0 d* m- O) A3 W' V2 }5 H' FAdd some images to the new content type we just created.
2 Z, B* r+ O/ i1 Q1 d1 d
Create a view give it a name and continue with the default settings.
; Q/ N! D7 V5 f1 k9 ?9 j5 }$ V


; y5 @0 E2 z: P8 ^0 Z( X5 xApply 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.

$ O# ?. M* F& TIn the Image Field Name settings page enter a label name for the field.

) R+ F! H/ {* a7 _6 pIn the Formatter dropdown select the Colorbox option.

6 D) D7 ~" L- L/ IIn the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.
/ Q- `& y" c( L/ S3 T. M. g" Q) ^/ r
In the Colorbox Image Style select the name of bigger image style.

* A+ m+ I; Z2 XClick save and save the views also.

* `3 d  }0 M  c: q: N1 k" DNow go back to the content type we have just created.
Click on Manage Display Field.

2 u$ h: Z% M7 O. l0 f# I5 |7 BNext to Image field is a dropdown labelled as Format.
. P  G+ g6 a' J5 |7 z1 A* |* }7 B' w
" r. q* _0 k( [5 bSelect Colorbox and configure the settings for the field.

Node Image Style : Smaller Image style.
  ^. e# ]7 N& z
- Y' T0 A% f2 D1 `$ \% \# vColorbox Image Stye : Large Image Style.
, b3 J' G9 O/ P' E* ~
Click Save.
8 e3 C+ J" K- K" o3 s5 Q6 ~
Now you can see your images in a colorbox by clicking on them.
' o5 L7 l/ F; ]3 y9 W. ^
( m0 _% C' L2 B  tYou can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.
' B( G( e$ \' d0 ?7 A: P& m
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.




3 B/ ?' {' [' d% v5 ?  O1 `3 ?
  H4 R. G9 {9 r' X0 o8 z. |