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.; G; T2 [& D5 o9 ~% I% _ I
! E; E n, D2 k! `% s( B. W2 C
Images, iframed or inline content etc. can be displayed in a overlay above the current page.
6 L# t' `# Z2 Z9 Z1 g7 k6 n4 B/ e! ^' e/ C5 L: P% z& w. s
$ y, m/ X4 s7 B) G/ K
/ }8 v3 E7 x: f) j: r! M
# o# V! Q3 h: X9 @
$ w7 P1 g$ G1 O5 E9 q" ]5 A! N+ c. u
. g0 E# ]: i; r7 z$ _% M2 I1 c8 r8 W8 j6 h! q5 j F
Features
6 H* g' F9 H/ P5 F( k* u" cThe Colorbox module:; h! ^' Z1 B: M# s. W3 J, ]8 r$ [
9 b# H4 i( |6 I# mExcellent integration with Imagefield, Imagecache,Insert and Image modules4 p6 q. G) s5 ?5 O
Choose between a default style and a number of other styles that are included.
* G2 Y8 P- x N1 `1 HStyle the Colorbox with a custom Colorbox style in your theme./ V8 P H! c( H ?2 m
Option to open a login form by clicking on any login link( D( X7 k, d6 g! f N' R1 Y L* B
Drush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file
6 A* h' b. R$ }$ j8 g* f" g$ f( F; ]) NThe Colorbox plugin:
. Y( b% w, r/ Q
& `% P/ q( W5 f, KSupports images, image groups, slideshow, ajax, inline, and iframed content.
7 W5 W, o' w8 xAppearance is controlled through CSS so users can restyle the box.; E m% t( e% T) j
Preloads background images and can preload upcoming images in a photo group.
; T) D4 X/ b8 B: G; w1 x i. PNow lets use the colorbox module to show content images in a colorbox.
5 f! }; [0 D7 A6 e) r
# |5 M! s7 {, R! v( UDownload the Colorbox module from drupal.org and place it in sites/all/modules folder.
1 ?* p! \* `. h" h
. d9 M9 B: a1 S* R d3 s( T1 iGo to Modules and enable the Colorbox module.4 O* ?3 o. r9 a# Y- [" x6 ~2 d
) Q. e/ U5 I7 ? `( X) uDownload and unpack the Colorbox plugin in “sites/all/libraries”.
& z) R- v" k0 S' J8 r& DLink: http://colorpowered.com/colorbox/colorbox.zip2 k8 Q4 u( B1 E- h5 a3 v! F
Drush users can use the command “drush colorbox-plugin”.( ^' w! ]; F& A, K& @
8 a+ [( N) q# Q" k: x0 M9 KAdd two new presets by clicking on configuration-> Media ->Image Styles.
+ e! g0 M7 w7 f9 c+ u9 m4 z3 m! {' }, C1 c
Set the height and width of the presets accoiridng to your requirements.
) Y( q [$ v& P; q8 p8 t$ E+ R1 s- i7 c4 T Z6 g' _# ~
One preset will used for the preview image and the other one we use for the full image to be shown on colorbox.
; y1 a+ b4 I7 F. B# U
6 b( E9 t X `" ^Save both the image styles.& X& |% M5 j+ c8 o/ V% Z
9 V* @0 Y# [( K6 y1 T+ R. z& C0 X( ?Create a new content type.
/ N6 W$ Q6 j- D0 |7 ~6 X1 r+ L8 d+ |+ l9 @1 \% p( H
Add a image field to it.8 t2 w$ F0 e7 v# N
) J- \/ O5 y" i# ^ 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.
- X: y% m" }9 o5 |+ `+ G- l, H; A8 T0 t$ \" I# D. L6 G& Z
Add some images to the new content type we just created.
3 ~+ m$ L' f8 N6 b
" r& p+ K% G$ Q5 j, Q' t gCreate a view give it a name and continue with the default settings." _5 L( s+ o; Y. ?
& r; X. G; k: d# W2 o
9 ` \. g( g; G- _# c9 o- L" V
( D- E3 n' t6 s; HApply the filter criteria by choosing the content name as the filter.
, d* X1 r0 ^9 \ R+ q( Q& @& b# v0 g) v5 N/ A9 W3 I; i
Now select fields to display in the view.+ w% @! w, U5 r
( e3 Y1 P- E1 S" M7 bSelect Content Title and Content : Image Field Name as the fields.# g( n/ B% K A5 s
' _) T. l) c4 Y+ H% t4 n* J5 c( S8 iIn the Image Field Name settings page enter a label name for the field.
' |& ~/ o) p* d) ?
' ?; y/ p1 B' F: k* O0 j( n) QIn the Formatter dropdown select the Colorbox option.
+ ]: I2 a5 ]0 c$ l2 w e6 D( q4 ]1 a: @
In the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.( A' f( _: f( V- x: a
% @+ m7 g; U' O# S) d
In the Colorbox Image Style select the name of bigger image style.5 y e* e0 \! {; V
8 ^- O: F1 u8 sClick save and save the views also.) [3 b( T1 T8 ?# H8 U" s9 p
$ w, {/ K, r. l
Now go back to the content type we have just created.
* A( \" @% |7 e+ yClick on Manage Display Field.
6 g P* u1 m7 v! O, v' f
5 k" h1 o: q( r' y- F9 R$ SNext to Image field is a dropdown labelled as Format.: a. G1 n" A/ q5 |" y
4 l; p0 f% E2 S& A7 n9 qSelect Colorbox and configure the settings for the field.' H: W( g1 `7 l7 O- [- f* v
8 P5 b& Y0 S4 C' K# |! _, J
Node Image Style : Smaller Image style.( T) e& E* g! x! g0 \, g
3 B2 p a0 U# SColorbox Image Stye : Large Image Style., }% g" I: J1 j: L$ P k
7 O. [; [) g) G, @Click Save.7 t Y6 C* O; u+ [: R# ]
) A- r2 d: e6 d; R' q+ |) E. H
Now you can see your images in a colorbox by clicking on them.8 y. a+ r2 G) n+ z% f
3 `- ?8 @" f8 X7 X! A1 Q" C6 tYou can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.
0 `7 i3 G1 o% r1 ^
$ J" p- {2 d8 {$ {; rWith 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.
. V$ {0 J7 s8 ?, A) T
* l5 i: x# V0 a% n; e
' J* z# A& r) \' \+ c& s0 W6 @* u
+ v/ r3 `' E, d" s1 @* |7 w, ?' W
( ?. P4 ?2 C4 @+ g |
|
发表于 8-29-2011 04:52