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.6 v: ]$ ~4 N& U- ?) w' h
6 z! d) a4 l, L- f" t6 j3 i% |$ u
Images, iframed or inline content etc. can be displayed in a overlay above the current page./ |" A) f) T! Y R
/ d0 C5 @5 h) r, z1 |- j
) \$ }- n0 o+ X" T
5 Y4 u% A7 i" V4 v$ p
. r# K/ s: k% Y( E9 W! S, a
8 t" U& m1 U! U3 L' s* l; u2 b5 p, J! r0 [0 ~# R
8 u" g" l% O. M; n, B
Features
7 E0 \% I+ e+ YThe Colorbox module:4 h6 M3 s" r& @# |2 D6 N
8 }% h3 ~# p1 Z% T5 j1 M" Z @& hExcellent integration with Imagefield, Imagecache,Insert and Image modules
% H/ H, A/ |' r0 B+ v2 K* g. CChoose between a default style and a number of other styles that are included.
t# T, Q! a, H4 @3 Q+ PStyle the Colorbox with a custom Colorbox style in your theme.; h% q# P( M% N! V% R- b# y
Option to open a login form by clicking on any login link9 K+ L# @6 d0 b8 z
Drush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file- ?( z$ O4 u% `; q; ^" h
The Colorbox plugin:4 G+ b- s, ?: z* b
) {# W8 }0 J6 R0 |8 U" E
Supports images, image groups, slideshow, ajax, inline, and iframed content.
9 \" I3 \* _: s% q' D1 TAppearance is controlled through CSS so users can restyle the box.
6 Y$ O( z& Q7 w9 T0 E" NPreloads background images and can preload upcoming images in a photo group.2 l7 k$ g; Q3 N, U( Q: s
Now lets use the colorbox module to show content images in a colorbox.
. ^ ]& \1 P, Q: ?4 t) e v/ p$ k
Download the Colorbox module from drupal.org and place it in sites/all/modules folder.* i* h2 Y- `% `3 O- D! E
7 T) F- u: v1 t# G: h. I
Go to Modules and enable the Colorbox module.
) J- H0 _ e8 a8 E) N0 w* Y) G9 d2 U5 Z L/ w0 o$ B i6 o# b% m+ f6 D
Download and unpack the Colorbox plugin in “sites/all/libraries”.
! c* z4 T* V9 Y- \ R7 K( H. [9 [Link: http://colorpowered.com/colorbox/colorbox.zip" V6 `6 C7 s0 {# |* T
Drush users can use the command “drush colorbox-plugin”.
Y" ]+ ~+ C5 z$ [
: M$ V! m! j9 A) I o# ?Add two new presets by clicking on configuration-> Media ->Image Styles.
* N, y* R2 z+ t, j1 J+ _& g% P
2 _6 v% d6 s4 X+ G i9 xSet the height and width of the presets accoiridng to your requirements.7 \7 j$ z( `* I9 ], l
$ K8 y M; }7 E5 j- ? ?7 h$ L
One preset will used for the preview image and the other one we use for the full image to be shown on colorbox.4 M3 l4 S/ N d$ ^
9 ~. t {6 r" ]! ` j) n& w- ^Save both the image styles./ R* ~% L2 _2 S4 Y! L
' f* x9 {* h; V9 YCreate a new content type.
# _, U' U" G, U' w3 e# f# m* z* ?2 R, P8 e
, U4 J& |3 t. ]1 u/ I A* JAdd a image field to it.
3 |1 l0 @$ S! {+ v# w, J; s
) [/ V- O7 ]: h, I- ASelect 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.
0 m) [! |) l* A8 B( E
0 e7 J# f2 F. S9 h2 _ jAdd some images to the new content type we just created.. J" G9 y6 E" J2 _: e" C
0 H- R' M8 E6 G2 ~0 q. p
Create a view give it a name and continue with the default settings.! f6 U8 |8 l* I' l$ y$ a' b
, G' k, t+ k( y
$ K: q7 k3 \3 r0 r" x0 |- L- X U
1 W" q" v5 V) o" n" eApply the filter criteria by choosing the content name as the filter.
9 p5 V- y' E+ j, h& c7 u1 p0 l) B. i2 i" I) W( ~1 Z0 ^: S w' b7 L
Now select fields to display in the view.
' R0 _) \2 u P' h% j2 H! D. e. m* o3 Y
Select Content Title and Content : Image Field Name as the fields.2 g7 P0 y* m7 x" G$ i
% q1 u e# T/ T, }: A
In the Image Field Name settings page enter a label name for the field.% f, t4 f( a' R7 n5 a
8 N1 j- x$ h) s( L5 f3 g
In the Formatter dropdown select the Colorbox option." c9 r, l( ^! U! r/ u7 U; \0 H; m1 J
8 J; `! u# X3 P* p2 z3 t1 QIn the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.2 I `! k4 d/ T0 D
" y, n+ c6 e) H+ e4 ~In the Colorbox Image Style select the name of bigger image style.: X5 a) G0 s1 G+ n9 b0 n z7 Q
* b; t8 s+ n* F; L' V$ S
Click save and save the views also.
: L4 ^ O# b1 B8 M6 }" u' a$ @- {. M* V# X K8 \
Now go back to the content type we have just created.* ]+ D4 `) @& p$ w2 j7 v# z P
Click on Manage Display Field.
E4 F9 w3 K: Q2 P0 ?
% A- q, u8 F5 eNext to Image field is a dropdown labelled as Format.. a1 O% H4 V# I3 b! U1 K
# f9 s( j& c: d# {# ?& cSelect Colorbox and configure the settings for the field.
5 K5 s" x, [) G1 Z, q0 ~3 {3 E5 l0 a8 Y7 X+ H
Node Image Style : Smaller Image style.: Q8 F/ i/ \9 l. f
9 d N& h! j8 p. B, ^
Colorbox Image Stye : Large Image Style.
! j) K% b9 n- z7 \$ E
2 @& O5 F8 X r/ K5 p0 RClick Save.
9 W* g* h1 p2 C( L4 g* @5 S8 Y6 }# v" r6 _5 t( B
Now you can see your images in a colorbox by clicking on them.
/ _) {6 [! C5 M) [0 M; c$ G- f7 ~) @$ H; _
You can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.
) c5 c9 a( {, i' r
2 S8 C: h& D# O3 ?8 n& H$ KWith 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.9 _3 b2 ?) |/ o: }* T$ \
: i0 X1 H4 g/ u. @0 T
! z9 d. c2 e# o; U. T9 h; s; E
9 q4 {# Z. T# ^9 n% X9 E
* @! U- V4 I7 t3 K* }0 y- N. F4 F( f
|
|
发表于 8-29-2011 04:52