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.! s/ N/ a# Q, G3 S8 W% F
) C2 `4 u s1 T# `4 Z \5 h6 [
Images, iframed or inline content etc. can be displayed in a overlay above the current page.2 _# g+ ^( b1 z% l& _# v
1 S' U1 T' y5 D8 t9 V$ h
( e7 |* W/ \% d8 H/ v) n, ]1 u, _: P. x8 i9 q+ j
9 U- L/ `" G# k$ y% Z
 - T; k+ u: H' C$ y) Z) S
/ v3 a$ T( @) f3 q6 }8 k7 _. i# B
Features
4 Q2 F$ X6 n5 BThe Colorbox module:1 S) G3 U( _* K3 ^) i
0 v6 @8 E# C% d; k! r$ T" t
Excellent integration with Imagefield, Imagecache,Insert and Image modules0 n( N+ B! U! i
Choose between a default style and a number of other styles that are included.
7 g; N4 _: r, L: n8 |5 _( k5 Q' P- g/ \Style the Colorbox with a custom Colorbox style in your theme.
( v% s ^# V- cOption to open a login form by clicking on any login link2 M: U8 o8 Z- f+ E
Drush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file9 N6 k8 Q- O8 }9 I+ T, Z3 l+ V
The Colorbox plugin:
K' ` J! h) n% k1 Y" j2 R. E- F+ |- k
Supports images, image groups, slideshow, ajax, inline, and iframed content.
- v# P0 r# K9 Z* E) X5 f. r, dAppearance is controlled through CSS so users can restyle the box.
; s6 Y# V* }$ ~; J8 e1 O: tPreloads background images and can preload upcoming images in a photo group.6 e* r" U( [/ _' E% V! J
Now lets use the colorbox module to show content images in a colorbox.
) z4 U) L& S3 F- ^( P. f/ [' q, K0 Q0 h0 ^$ `# }% r- H
Download the Colorbox module from drupal.org and place it in sites/all/modules folder.& O. }. ~: d0 ]& x
) y, H- V. \9 N: m& A
Go to Modules and enable the Colorbox module.7 |- T0 Q$ I" a; k: @
! c4 j6 [" \1 U" o Z! l6 R/ Z" N, [
Download and unpack the Colorbox plugin in “sites/all/libraries”.
]$ E# a. ? I5 T4 eLink: http://colorpowered.com/colorbox/colorbox.zip! k$ k$ R H# s8 M2 Y3 ^
Drush users can use the command “drush colorbox-plugin”.& X/ f* b7 q8 r
0 G6 q5 F, O7 R2 w& ?" Y
Add two new presets by clicking on configuration-> Media ->Image Styles.
) q3 _% \, K& K" k
" \* @( ?8 ?1 s; S# t9 wSet the height and width of the presets accoiridng to your requirements.) q% K6 _+ j: H0 W$ r r8 R1 J
7 O: e$ p) ~2 u5 S: ~( a' G8 zOne preset will used for the preview image and the other one we use for the full image to be shown on colorbox.
% [4 o: M' p2 l) \: A" Y1 U0 i, L/ }4 b
Save both the image styles." n/ y D' V( x# M8 P2 |! d
; t- A- h1 D9 b& m+ VCreate a new content type.; i, G/ _- L# q$ D6 l2 A
* `0 s6 x; p9 s, K$ t
Add a image field to it.
% |, w/ e) E- A; P6 V& ^% W, e: ^. U6 x( p& r" f
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.7 w% i$ r) e" |
) j, e$ s3 I# B' c4 R/ `9 ?; yAdd some images to the new content type we just created.
$ n. C0 z+ W0 c, A% w
" O5 F4 _% n5 ]6 I# jCreate a view give it a name and continue with the default settings.+ M0 m0 d, c/ p- P
( |5 L# E8 ~% e& z5 X
1 a. n" D# F3 `, C
( o( a" b9 t) E0 A5 ~5 qApply the filter criteria by choosing the content name as the filter.! N) H6 }! K! W, s% Y9 ]# w
, w& o! u4 C; f8 M
Now select fields to display in the view.% M. ]% `# O( z# f; O
/ t# b3 C1 X! N1 }% W. P4 YSelect Content Title and Content : Image Field Name as the fields.
. b7 P6 N+ M/ m1 Y3 E9 `9 p( J# B" \2 ~0 o( Y$ v
In the Image Field Name settings page enter a label name for the field.
% ?! u5 k; d+ _. N
8 X/ V# s# U r o; J: y9 HIn the Formatter dropdown select the Colorbox option.
6 |' |1 D( e; `8 Q4 V$ z( m) W9 F# Z
: A, w1 W+ u. `2 m6 h6 y& K: oIn the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.
7 }3 O/ s( P- i- z* a3 e+ Z0 C; b) {5 P+ o, A
In the Colorbox Image Style select the name of bigger image style.
1 j8 Y# T- i) d6 R8 _) o& U' Q$ c
Click save and save the views also.% d9 y4 b+ K% c; r
& x( l3 E- M* @. _1 N& i2 k
Now go back to the content type we have just created.
- m' I7 n* c3 @+ V# R FClick on Manage Display Field.
# {: Q1 D3 o" `- q) s( r6 w& p! f1 @) [& j+ l
Next to Image field is a dropdown labelled as Format.
# d9 } L+ [/ R8 X* U5 m6 U& v& M; K* X& _8 g5 K2 T. z6 R
Select Colorbox and configure the settings for the field.
5 M# G9 t1 u; I4 U; H! k& |% C# m2 Z ~0 d$ s
Node Image Style : Smaller Image style.
) f- s3 A6 c% ?/ ?/ c( G( a( N1 \8 q8 E1 I; {9 T }
Colorbox Image Stye : Large Image Style.
1 e ^% r2 n& s7 N5 j+ I6 d( C' U* T( D& \; {
Click Save.
2 `5 ~- k% M/ {0 ?! v" R w# P c7 b4 U4 ~# z
Now you can see your images in a colorbox by clicking on them.- r! s# j; f4 F4 f0 b$ K$ A
; j' K' q" a& [. l- k2 Q4 W4 W+ V. a: D
You can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.+ ^( m, s+ ^8 Q5 C
! i/ {. I6 N2 b- EWith 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.$ r2 ] ~2 o$ f4 H. L x4 _
/ B. |; k. ^) f9 o+ n) [( E# P1 u$ Q- F
3 J( m1 U2 A1 I: Q" { ]
) d1 N/ d" q5 a) I
3 e1 w$ i. x! x; g7 ]4 _
|
|
发表于 8-29-2011 04:52