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% ^& K# A d0 E4 c( g! T9 Y- c5 s- S9 T
Images, iframed or inline content etc. can be displayed in a overlay above the current page.
9 F6 K( `3 x2 T
' `4 `/ c$ ]+ A& ?. V! b1 u# s
* g3 ~4 I5 S$ v0 F1 f
8 \. X, C( G/ K" I
) `- t( Y( a% w" l0 u% D2 z : L6 i3 T& u. ? H! {) k$ Z
e) U% C7 i7 w4 E) w) b" b: L4 l/ q' T8 G# V+ H- `
Features; G6 s7 S2 ?* G1 l
The Colorbox module:+ Z4 G& D) X0 a! M
( D2 H: ^1 \" R6 S) v7 m+ L$ q
Excellent integration with Imagefield, Imagecache,Insert and Image modules
% ~& S3 S4 c# v' ]7 B. s) [! IChoose between a default style and a number of other styles that are included.# Y, D8 _4 B4 `5 L1 P
Style the Colorbox with a custom Colorbox style in your theme.( W% Y# u9 p8 c B4 V
Option to open a login form by clicking on any login link; D! c% c: u2 {" T6 j4 \
Drush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file
% a' ?3 z: [$ t9 wThe Colorbox plugin:0 W9 {$ d/ s6 s# `+ |' n8 \
9 u* d; u* G4 X/ Q. p7 p
Supports images, image groups, slideshow, ajax, inline, and iframed content.; P" W, {1 i0 x0 C' B- S( K7 N
Appearance is controlled through CSS so users can restyle the box.
, y3 n f. {3 x0 Z1 `/ X* rPreloads background images and can preload upcoming images in a photo group.
7 ]" ?0 D' c( n4 J$ ?: rNow lets use the colorbox module to show content images in a colorbox. f# U% q+ @" U# G
2 U7 P! I0 H- J$ |" Z0 mDownload the Colorbox module from drupal.org and place it in sites/all/modules folder.2 m* ^/ [* w$ n: i
7 s7 D( a7 f0 {* qGo to Modules and enable the Colorbox module.
! _& \* ~. S6 j' m, X
5 E. z- [$ ?) ?+ DDownload and unpack the Colorbox plugin in “sites/all/libraries”.
1 x4 q4 |' v; e z+ \Link: http://colorpowered.com/colorbox/colorbox.zip m, F+ ]: X$ @3 \" y$ T
Drush users can use the command “drush colorbox-plugin”.
- k9 U F" K$ Y" I" A) p6 N r/ I5 k' K$ e* E; J- p6 o# I
Add two new presets by clicking on configuration-> Media ->Image Styles.
1 E1 u3 T& S: n+ a# h0 t2 r3 }) v
; X) s! K i/ @) z sSet the height and width of the presets accoiridng to your requirements.& s! |6 g" F6 H
( H' I }. C+ a( u) ]One preset will used for the preview image and the other one we use for the full image to be shown on colorbox.5 h: o( }! X0 c
m2 |" Z9 f( i2 q0 d3 cSave both the image styles., V# \, ^+ `0 o4 M# W; g. v; g6 J
; e* s( k& g. a1 ?2 N; V. d3 rCreate a new content type.
% R! q* A" ~9 }: h" R# _
2 u2 T6 t0 N- ?8 R, m# }% IAdd a image field to it.9 B5 F/ K' I. ]# s2 G
% p" m1 x7 j5 K3 eSelect 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.
' d+ e; g$ \/ E0 ^& e* w& q+ l( O) x- R7 `* F
Add some images to the new content type we just created.
- g- P$ O- |2 o/ K. f v0 D/ j. k+ h
Create a view give it a name and continue with the default settings.
: w1 U/ A( |/ h( G( G) ^( `# o: E, g
1 |$ |, F7 j% A* t& |2 d% `' P
% q( s* B% W2 c' ?) dApply the filter criteria by choosing the content name as the filter.
( @+ H) p: c7 Q; B9 L, O$ ?/ p5 U7 x1 j
Now select fields to display in the view.
( c( s; l6 [ b5 @* [. c+ t; ^ |9 X o! U" l" R1 T) a2 x
Select Content Title and Content : Image Field Name as the fields.
. n. D% S6 i' r9 o
$ N% h z ]! U" ^$ Z* {+ fIn the Image Field Name settings page enter a label name for the field.& n; E- c, x! _2 D3 U, T* k* c
# e: A4 D: u' E+ A3 a
In the Formatter dropdown select the Colorbox option.* D9 N9 |; `0 j, _/ H5 e" d. C/ O
) C7 Q2 |& `* J' }9 N, QIn the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.
; d* { }# g0 M6 g5 z
" b3 j+ y' Z2 K7 Y( o- dIn the Colorbox Image Style select the name of bigger image style.6 j( ] r' D- E1 x5 T! w, @! y- E
* v) S$ x- `8 O; k) A+ ?3 xClick save and save the views also., L4 v% E. w/ a9 i$ t8 l9 j
3 l' u+ L i8 \! [
Now go back to the content type we have just created.( u" |; D' n& S+ U
Click on Manage Display Field.9 ^: r! p+ w8 h/ H) E& R& k
) [/ e8 p6 u/ s2 j. |; uNext to Image field is a dropdown labelled as Format." P2 d# \1 H9 u! p
% X! e P" x8 F* x7 VSelect Colorbox and configure the settings for the field.3 k" K/ c9 l& {) S6 b9 v% {* @% C, s
/ ~/ o/ W/ R% O% [9 ONode Image Style : Smaller Image style.9 g# R& @" S/ C n2 Q8 n9 a8 Q
1 p" |. Y: y8 f
Colorbox Image Stye : Large Image Style.3 g c. }, f0 X
% j4 C9 N' V( l8 R/ H0 qClick Save.# W/ I' V$ ?5 f! f0 }" e% c
0 T+ ]3 h# h8 W) nNow you can see your images in a colorbox by clicking on them.
+ E: A! R9 O% D
4 x7 i# r4 Q& k8 vYou can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.
2 M. H' x, h2 w. o- w( q& m
: ~2 x$ M; \9 S# |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.
" n" e9 y* ^! C t. A, L/ S$ S/ ^0 M4 B- p! x. G
( z# ]1 y+ y: ^2 m' h; w; S% n
# `! K0 ?8 I* i- n" }
# i" j6 c x) P- m- |' _
, S" K4 @0 Z2 r: P8 }. o
|
|
发表于 8-29-2011 04:52