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.
. W% \0 D+ w, ~4 Y/ u
_+ {9 g* Q* m. v9 X" @Images, iframed or inline content etc. can be displayed in a overlay above the current page.
8 F+ h$ L7 ]8 O$ n; e
: C& r7 s6 V$ K. m, Q
2 }- C( O4 t+ z8 D" G- J9 ?) E
$ W/ O7 o& L# t( P( U/ K+ ]. X2 t# r0 O' L4 X, n% W5 }0 Z
 * b9 ^/ N7 p* |2 ~
c' O5 m8 }& [7 K) o+ E0 Z# a7 B" J% ]
Features
9 X" x5 s. e+ RThe Colorbox module:
2 K3 R1 e5 Y) \ h/ z1 D1 K
6 L) P2 S5 {4 K9 d( e: T$ qExcellent integration with Imagefield, Imagecache,Insert and Image modules/ U% @# `9 p1 C* d5 {( L" r6 _* o
Choose between a default style and a number of other styles that are included.
M6 h- x% ]3 c3 NStyle the Colorbox with a custom Colorbox style in your theme.
3 e$ L, ?! O- c1 FOption to open a login form by clicking on any login link
8 n+ ~* |! I V8 J' C% mDrush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file
: v/ g; O% h- T& VThe Colorbox plugin:2 O( s. u) E; R4 O
7 x7 f2 |$ F8 j6 b" l+ }9 y4 |Supports images, image groups, slideshow, ajax, inline, and iframed content.% f% W! i5 h& o# a; {# Y* D
Appearance is controlled through CSS so users can restyle the box.
; i2 R" _0 u8 u& N8 \Preloads background images and can preload upcoming images in a photo group.
9 C0 w; v9 k# h$ ?7 ?Now lets use the colorbox module to show content images in a colorbox.: |0 D% e& A- [7 b4 C9 }9 d; _0 o
" H& F9 Y0 i8 ^& \, s- ?9 b
Download the Colorbox module from drupal.org and place it in sites/all/modules folder.- `3 | b8 M+ _- {$ N1 o
9 z3 Y+ z$ G! k/ [+ W1 Z
Go to Modules and enable the Colorbox module.6 l; w$ A" z. @! i% N+ z5 j
* x( g+ C2 U+ O( ~+ ~
Download and unpack the Colorbox plugin in “sites/all/libraries”.# u: t2 y/ Q3 w; [2 Z7 u
Link: http://colorpowered.com/colorbox/colorbox.zip
# y8 t5 N% |/ k! R: v' p( lDrush users can use the command “drush colorbox-plugin”., X7 m! Q# [1 S( a
: O1 s8 y0 A/ T+ J- CAdd two new presets by clicking on configuration-> Media ->Image Styles.0 }- E* ^& ~- t. v# r; n% d
* G$ ~; V% S5 R" S
Set the height and width of the presets accoiridng to your requirements.
! {4 r" n" Y. m& m+ Z6 @ o& o0 s4 b$ m
One preset will used for the preview image and the other one we use for the full image to be shown on colorbox.- ]' z3 h1 |2 B- V$ \
5 c( S6 r$ ^. Q1 [% t
Save both the image styles.6 A9 O% u$ ~; w0 Z" v, I0 u! N
# U& k% f/ }) Z2 W$ M8 D
Create a new content type.2 d8 g) x* E$ Y6 f7 S8 g
4 P; W) X! z5 r( D, V9 S! l
Add a image field to it.! E, p2 e. g- }2 Y# J+ g
8 L' v/ v T/ d O, b: U" fSelect 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.) f) F+ S2 d) L; Y3 ~. f# B# p
8 T* @# N8 y* a P& p/ c- ]
Add some images to the new content type we just created.
" F4 B; R+ l- @! U3 ^# A% [" a1 q- s* ?5 g- `
Create a view give it a name and continue with the default settings.
0 U. {# Y j5 H7 y& {! Q" i
- w d- F* O1 l3 F, |6 x
# Y3 j: h% t6 p# u( E- u- O( e8 v
' r$ f" b {: l8 b' p8 k0 E$ AApply the filter criteria by choosing the content name as the filter.( Y& T/ P& Y0 s. D
& R& ?- n6 L0 u e) v
Now select fields to display in the view.2 J& s- c+ z7 e0 e# d+ y( Z
+ f' y6 D6 M+ [( T& ZSelect Content Title and Content : Image Field Name as the fields.5 }. _* P! I- c1 A$ u9 U- |( U u: d
5 L4 ?4 b' v8 x; _" {- OIn the Image Field Name settings page enter a label name for the field.
8 Z% Z D0 C" W1 s3 P% D. ?9 {! S6 j* _" r: [5 S) Z
In the Formatter dropdown select the Colorbox option.0 x) n- U* f- M) i
( X+ C I" l6 F1 L$ v6 K* pIn the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.
5 O3 R/ `2 Z' y& p5 C8 p5 f h$ r6 b0 Z5 g- d) d
In the Colorbox Image Style select the name of bigger image style.# {2 v% C$ k+ S9 g, @& l. E9 p
. i6 U. m+ A5 h$ v/ N9 _$ |Click save and save the views also.3 y" ]0 z2 V( U4 B
; g+ t; q1 H0 v+ ]6 A1 oNow go back to the content type we have just created.9 [0 |, B0 ~) m7 {" m' I. H
Click on Manage Display Field.
% P9 R8 q# I! M% i8 [( O
: A. p( Q$ \' J; C' m- c0 w: Z' T8 UNext to Image field is a dropdown labelled as Format.
: U) k; q* I& T' O: U
8 U; F- b1 G7 R2 l% c% k& KSelect Colorbox and configure the settings for the field.
- z* J. c/ ?: A4 }2 \/ f/ ^- K5 _2 a0 U) [) L9 s0 L& m0 ^% P( d7 t
Node Image Style : Smaller Image style.0 ?+ C- t! _ I) p( e
' X0 ^& P. \; J
Colorbox Image Stye : Large Image Style.
4 y' l6 x# l& |/ d9 \) M# v) l0 v7 z `1 ?( O
Click Save.
- v7 j; J1 K: o8 `/ R7 n' U1 E+ `$ W/ r' _. @& j; X' i6 l! V
Now you can see your images in a colorbox by clicking on them.
4 j9 d' h& |$ L0 @! v4 R. T) O. U# i1 X" l' w5 J
You can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.3 K9 I% p5 r3 J) q* q( g4 D( N
7 m5 i ]3 K; }: O' I, ~: x
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.
$ ^$ f: l# ?: O3 ~: r6 w* V1 |0 y& O; Y+ y
/ v' b G+ }' c }# P( R5 w8 a! l( d$ u( M' y. t8 s
3 B0 y8 K8 ? o* q9 @8 ^1 s3 s
; J5 @: S' _, i% M- l( q: u |
|
发表于 8-29-2011 04:52