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.. O" s9 ^$ ?' w6 b
/ i/ W5 \$ m1 I2 f0 f
Images, iframed or inline content etc. can be displayed in a overlay above the current page.. l1 J0 A$ _ U0 `7 N
: ^* F2 a1 H7 d" R
& J( L/ n- p: R" x2 [4 L+ P; D
+ ~- T3 E0 Y- P: D" d* Y* ]$ w3 W' X4 {3 W3 Q
 6 e% {- P% o* ^" ~5 y
' Q y9 c) i, f \5 \0 O+ j6 f! y0 d- ? Y. ]$ a
Features
% Y# _* V7 O, s' Z8 i0 w& pThe Colorbox module:! m7 d4 {6 V0 M( c6 O7 D2 m
: Q( Z) v8 l1 W6 q# ]7 TExcellent integration with Imagefield, Imagecache,Insert and Image modules
5 Y4 }. e& i7 e9 b) Y, q# G) y* A8 [Choose between a default style and a number of other styles that are included.: ]/ p6 s0 R j6 U6 ~$ E
Style the Colorbox with a custom Colorbox style in your theme.; U" b( ^) O% M% Y. o E; n
Option to open a login form by clicking on any login link
0 j. F4 N- ^5 Q" XDrush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file: ^- Q _1 t+ i
The Colorbox plugin:
4 K' ^' P7 {' J2 l- K0 x$ s) U: |. X5 W" s# K! E0 G( |. C' y2 X
Supports images, image groups, slideshow, ajax, inline, and iframed content.
, a% a6 S% \1 t+ ^' j: sAppearance is controlled through CSS so users can restyle the box.4 P1 a( s8 ?) n& C
Preloads background images and can preload upcoming images in a photo group.
4 N. X) { r$ V8 E, L7 ~Now lets use the colorbox module to show content images in a colorbox.
$ u8 s& Y# t6 ]7 z
8 a* t' O, x4 J2 Q( }% ]2 E$ [& @Download the Colorbox module from drupal.org and place it in sites/all/modules folder.7 s% y: |$ p! e$ P2 ?
; B j, y1 i' sGo to Modules and enable the Colorbox module.
/ u2 K( y& ~: v' e# {' [( x
- H W2 Q% ^6 S- |; _, GDownload and unpack the Colorbox plugin in “sites/all/libraries”.
9 [1 x6 w0 n) \1 h0 I2 `Link: http://colorpowered.com/colorbox/colorbox.zip
# `( H# ?, g; o1 a0 ?Drush users can use the command “drush colorbox-plugin”.
& b) H) l( F# n; @' b z( k! u
0 @/ F9 w7 S7 G$ i' v9 TAdd two new presets by clicking on configuration-> Media ->Image Styles.
$ l$ h) j- o7 h; r3 @! b
0 x5 G( B0 b5 D* H( KSet the height and width of the presets accoiridng to your requirements." ^9 A) r, w0 \% e
0 O8 R7 K9 ?" S) h
One preset will used for the preview image and the other one we use for the full image to be shown on colorbox.% Z, s; U) ^( B% R6 E
( ~+ S, v8 s! f9 G
Save both the image styles. U8 L" \2 W: ^. L; V8 M, B5 A7 Y
, k9 N4 @: `2 w& N5 J
Create a new content type.
/ k I f1 k; V8 J. M2 @. ~2 H
9 T+ i7 V' _. sAdd a image field to it.
9 ~; J9 @) g+ ]9 }: v; Q% b7 ~8 d! M: _8 g
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.
; P/ N" j s+ ?6 ~9 T( T0 c1 C, S( M9 @! e% T/ N
Add some images to the new content type we just created.
# U7 s$ }4 I5 g( }& ~: y; U8 u+ n1 [% R' _8 l+ ]& d
Create a view give it a name and continue with the default settings.- l6 B) x9 @! L# H; g
0 W) Q* B0 m4 _! N- Z
6 ?: C7 D( D, D; L- g7 z+ y. b9 V
1 E1 B1 {. m5 C3 @9 s. r/ OApply the filter criteria by choosing the content name as the filter.
! h2 Q0 c# y ?' z' x* G
, _. B/ K6 r5 T7 B8 I8 fNow select fields to display in the view.* K6 h8 ] r. D& G9 B
1 L8 n G2 s. n% v
Select Content Title and Content : Image Field Name as the fields.6 g$ g- W# `- K* T$ U
% t/ w' n- \7 ]( D4 G o: l
In the Image Field Name settings page enter a label name for the field.2 y; p1 I& Y2 L4 h% M' D0 {7 S
) V( i% u% L* x4 z
In the Formatter dropdown select the Colorbox option.
# F/ H" |( G8 @9 s! i: r P/ \* ~, ^8 s. l4 w# R( h- S
In the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.
7 Q' r2 o8 d8 u0 m4 T; N! o2 }* x
& E) l; g& K9 ~5 |; z; N9 ?$ f1 jIn the Colorbox Image Style select the name of bigger image style.
/ _1 g# d# ~4 L+ I* o' e
. E0 `: ]" |2 A" k: m8 A! @; a6 `Click save and save the views also.5 V3 V* V% I+ L9 B6 w
$ J, B% {' k ^$ q6 y# l; T
Now go back to the content type we have just created.
- U0 n' g/ _3 F( U, e* c0 tClick on Manage Display Field.
4 \3 t+ @ f+ l; T) A1 u2 O* R( ~* y) N4 \& v9 N2 ^0 Z$ S
Next to Image field is a dropdown labelled as Format.1 Z2 U+ y) F; b; d' z+ Z4 K
1 m! a8 S' b, aSelect Colorbox and configure the settings for the field.8 h# |3 C0 z/ z+ i
" O' C* J6 O+ ZNode Image Style : Smaller Image style.
, d- {2 c/ [6 s9 _ [2 b$ M) _/ T* @* M1 S9 E: ^
Colorbox Image Stye : Large Image Style.% u+ A/ x' v T5 K# h
1 e6 o4 E1 q g9 N0 [Click Save.
- b2 Y- x# T9 s3 X+ ?, k2 |. [# U2 i6 O4 o. U
Now you can see your images in a colorbox by clicking on them.2 _3 C7 @/ E: T W; ]
% l# j2 Y; T/ _9 j" W2 r( xYou can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.) Z6 l7 _" Z3 \- P
5 o6 Z# c( _0 Q1 M$ D
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.
, E! w9 Q3 Y5 p; G: C2 C$ `8 z, i3 E& B/ y y
3 m0 a8 P1 R# @( Q8 v) `% T. f) A8 W. E$ L5 Q: i+ l0 O
. W/ i& T' a* _0 m- I' u$ N9 ^# U
1 [" }# A, @" ^0 B |
|
发表于 8-29-2011 04:52