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.* l9 g4 O1 T+ s
4 p9 `/ L, M9 J2 m/ M$ O2 ]Images, iframed or inline content etc. can be displayed in a overlay above the current page.1 i" t$ ~0 L2 b1 u/ w8 h- Z
% q$ \- v% Y$ q& F2 C/ O% V/ P: t7 [7 H# B
& p O' F* I; x: z
& j$ ^ d5 H) C+ v: U/ p * d" }: E H& E' ?# w+ Q3 j, j
% A5 @8 l! v$ D9 V/ Y& \# W0 W# }! j5 U/ \! ?. f) q6 ^+ |
Features' y6 w: ?) B- d/ \: |% y+ a! r
The Colorbox module:/ S3 H. I: J8 O, M/ ~
: r& G- h- L7 }" q4 A, t
Excellent integration with Imagefield, Imagecache,Insert and Image modules1 N; i2 Z6 ?' n8 B2 r* }
Choose between a default style and a number of other styles that are included.
4 x. G) F8 `" u9 C% g( yStyle the Colorbox with a custom Colorbox style in your theme.
% p* [% C& A3 F2 {Option to open a login form by clicking on any login link
! m4 X' O3 D: `- w5 mDrush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file4 m+ ~% c0 m A
The Colorbox plugin:) h( _0 z* K2 [3 f$ S
' `3 |+ o" k5 ~3 B1 m" V( qSupports images, image groups, slideshow, ajax, inline, and iframed content.
, B6 q1 I* z2 P" x b4 DAppearance is controlled through CSS so users can restyle the box.
' E4 D$ f& ]; W: w: z9 N7 ^# [Preloads background images and can preload upcoming images in a photo group.- b/ N$ y0 X2 t5 O
Now lets use the colorbox module to show content images in a colorbox.3 R( G% s/ o7 e5 y
3 V! [+ r4 X, p+ ~: ` P0 v1 K5 K8 sDownload the Colorbox module from drupal.org and place it in sites/all/modules folder.
' P2 b9 t$ s1 F0 Y$ @7 u4 X7 r2 ~. m. x |
Go to Modules and enable the Colorbox module.4 h+ e7 t, C9 P& S
/ b' }, S' n! \9 A, c) L* @: J
Download and unpack the Colorbox plugin in “sites/all/libraries”.2 U* U3 O) A7 Q* J( q0 v& y3 a! x/ c
Link: http://colorpowered.com/colorbox/colorbox.zip
M* }8 H. l( m+ h# _- L( EDrush users can use the command “drush colorbox-plugin”.0 a7 Q+ l5 o$ @0 R* T" F
$ `* H/ \1 s0 P4 i# x0 GAdd two new presets by clicking on configuration-> Media ->Image Styles.( n6 P5 k, s3 M: y
; W- Z" N* G7 s* h# W: Y& G6 X
Set the height and width of the presets accoiridng to your requirements.
, p/ I# l+ C0 [* `" z9 S1 K6 v( M* H" t( Z: d
One preset will used for the preview image and the other one we use for the full image to be shown on colorbox.
7 l0 M: [ @! }3 L" W7 }9 M
7 H j0 A# u- K9 Y9 ~Save both the image styles.
* l7 d% q- }: h6 O) {' |
# o; K5 |; G" y9 MCreate a new content type.0 T" K' n% u; ]5 {2 y5 b5 |. V
9 n+ Q# n, ~$ }+ u
Add a image field to it.
1 `* \+ c* P! Y3 M! B5 j# Y3 |7 f
4 r- z5 e" K" A( H% y7 w4 CSelect 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.
3 p3 P b; C* T6 z& |+ U2 z" R* E: ~6 z9 q O' V2 v' m+ ?1 X
Add some images to the new content type we just created.
6 F! d1 O7 b+ Q. D: f
2 _( r6 \" A/ t" o- lCreate a view give it a name and continue with the default settings.9 C0 Q+ Z9 l% \9 n- k
( V# i( B0 j ~. z3 n- X9 O$ X* w9 r' E, X( V& e2 V9 R% \) f
8 _3 ^* h5 z' Z$ w! E/ D
Apply the filter criteria by choosing the content name as the filter.
1 |8 |) Q) J, @; O. B: H: r; k( r9 ]$ M/ G2 B9 t
Now select fields to display in the view.
1 z [. g: y' v! @2 J
) ^- Y; Q6 K( O" ^) WSelect Content Title and Content : Image Field Name as the fields.; f5 V9 x( E/ N) v
6 A+ R8 E/ ]5 l% _
In the Image Field Name settings page enter a label name for the field.# |# [ q S8 {' _
2 O, v1 e. M A& a! Q
In the Formatter dropdown select the Colorbox option.
2 V% `/ P" n: k9 I9 _" V: v
9 Z) q/ x6 F/ k1 `. n" @In the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.
$ y2 f0 s6 P1 X! a# [' C
6 Z6 V4 l! V5 J# r' p" f* sIn the Colorbox Image Style select the name of bigger image style.% J# P9 Q: h) \0 ~& P- N, V
6 \1 O& j6 M9 F
Click save and save the views also.
% M8 R% S( z6 z8 {
: S( W' i; ?0 S9 W# l* D% eNow go back to the content type we have just created.
5 J* x* V7 ^) J- I+ [Click on Manage Display Field.0 ^; l* H% e: X5 {' M6 w& {) Z4 S
; [, v; C8 }! S" hNext to Image field is a dropdown labelled as Format.- m D2 ?& L, }
% w x' R, Q+ l3 z1 m7 USelect Colorbox and configure the settings for the field.4 S8 d1 y9 g7 t! F
# W' x7 f9 D5 p6 KNode Image Style : Smaller Image style.# g9 a, g/ F. S
. w; r r2 b1 t2 w% F O
Colorbox Image Stye : Large Image Style.
. d3 u& Q$ M% [1 _0 \! g
& \. Y4 G1 J# u* e4 pClick Save., }) }. R; Y% T7 V! S
( O; K+ z3 b- R+ ]) I
Now you can see your images in a colorbox by clicking on them.
; ]$ V1 s9 M/ Q) L5 w1 h9 A* k, q
9 [2 J5 q) ]# bYou can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.
2 {! b& G& N% u9 |
2 X- J- o* p2 h2 j& M5 G7 YWith 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.
: a: N, a6 K9 _( [ b4 e0 Q- t3 h7 s% n: `5 [( j
/ N0 b, j6 u g* Q5 o! {
3 Z+ E* @! O2 X# [6 Q# s% z
5 V6 r5 H7 i9 F3 O0 v }' a9 N
* L7 c4 F# x% u E+ J7 e1 @: M |
|
发表于 8-29-2011 04:52