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 h/ |& A, a0 n, M
8 K {: n) |) J. f8 k( F) TImages, iframed or inline content etc. can be displayed in a overlay above the current page.1 ^! I1 L% h- H
0 Z0 l- [( a6 M/ N4 E$ N/ ]
* I# b0 E7 d I6 t! g. h3 S8 Z& C0 R6 h, |! G6 B9 }' |
* Z8 R9 n% }/ z7 I$ j8 C " X( R w/ n( c
4 r& j, l. W( y4 `2 J" N. n8 [, A0 |' [1 Z
Features
( b/ u+ D8 L0 {( D6 Z/ h: M3 zThe Colorbox module:1 E G$ T, H, ]0 }* q# G- y
' V5 c' E; I" J7 cExcellent integration with Imagefield, Imagecache,Insert and Image modules
N1 A! O( m5 m4 C3 FChoose between a default style and a number of other styles that are included.
! G/ {! [# `) s3 zStyle the Colorbox with a custom Colorbox style in your theme.
9 d# g& k H( `/ F! X& {" ]Option to open a login form by clicking on any login link6 @* R. H2 D* E
Drush command to download and install the Colorbox plugin in sites/all/libraries as well as a Drush make file5 c+ t* U; P% ^, C0 q
The Colorbox plugin:# f: O$ i; \+ R3 z" X
a+ |5 g% \. n# w! \; BSupports images, image groups, slideshow, ajax, inline, and iframed content.8 S4 z _' M W; E n
Appearance is controlled through CSS so users can restyle the box.
1 {1 `5 ^( f# oPreloads background images and can preload upcoming images in a photo group.
, w; f9 N2 R g9 k, R. R- RNow lets use the colorbox module to show content images in a colorbox.8 r* F+ n# K# y' F) j
8 J, K* \5 @0 |, p& cDownload the Colorbox module from drupal.org and place it in sites/all/modules folder.' J9 u/ E. I1 ]( l2 n& C
# D6 k( b. R% g7 o+ F+ ~2 `4 L. q
Go to Modules and enable the Colorbox module.
( T( Z$ H" x+ K% x- ]- V) ]9 b) T# {6 K9 e1 O4 k; _
Download and unpack the Colorbox plugin in “sites/all/libraries”.
k# v) [! [. M% r/ H3 ~Link: http://colorpowered.com/colorbox/colorbox.zip# t) ~: }1 a% y6 v& {, L
Drush users can use the command “drush colorbox-plugin”.& D+ D4 w0 L4 o, |
5 y" {4 E, ^+ H4 g7 C2 d" LAdd two new presets by clicking on configuration-> Media ->Image Styles.
/ i& R _$ H) u
C$ j, J. e+ [2 w+ GSet the height and width of the presets accoiridng to your requirements.# j" ~2 d& B& M* O5 t+ F. p0 j$ v4 n
# ~4 u o9 D4 Q/ ` A
One preset will used for the preview image and the other one we use for the full image to be shown on colorbox.+ O! ^( T6 A( S8 Y0 y8 ]1 A: {
, u8 F- q4 E6 I2 ZSave both the image styles.
- Z/ e% |5 L. [0 z- ^# ]! G2 e' U5 {# G5 Q( D9 J7 O2 }# I
Create a new content type.1 l- g7 t2 [" R N7 G
9 H7 q3 f4 E$ d4 r6 i
Add a image field to it.
0 M* Z. t6 o! M3 }. i: g4 ]3 v8 `- D) `8 _
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.
# x/ X! u& ?. u$ J5 b" b- j. y, E
Add some images to the new content type we just created.* O. N; A, S8 x( E/ w3 u
" p2 a' @9 c, \, s2 ~
Create a view give it a name and continue with the default settings.0 _# h0 ?! S6 Z* o# a
% G: D: u2 P, G
; I8 {" }0 ^8 Q$ V" s. u4 ?8 l0 y9 n) W: c9 B
Apply the filter criteria by choosing the content name as the filter.
8 m+ y/ Q# \6 w; G* n4 R$ l( ]
9 O/ N) R# T' f+ e' @+ ENow select fields to display in the view.
9 F0 U6 s7 o+ y) V$ _& H6 T- p2 j3 o+ N! n8 S) ]! ?6 j
Select Content Title and Content : Image Field Name as the fields.
6 l( u* L/ j9 P0 V; N3 x7 i8 ^
# C$ @" v5 s s/ E, `In the Image Field Name settings page enter a label name for the field.; q' C1 S2 Y' z- c( g s
0 B" O |" h% WIn the Formatter dropdown select the Colorbox option.
0 r/ v) p7 t0 V; \4 W
2 K* n( o8 S3 m0 c! DIn the Node Image Style choose the name of the image style we created. Remember to use the smaller size for this field.' ]4 f1 v8 x1 ?0 b2 w. D
4 l+ W+ R1 x- |0 f! r5 S
In the Colorbox Image Style select the name of bigger image style.
( b% c% ~ y9 x. h3 g* R6 u* ^# M$ d+ A, o! S
Click save and save the views also.
3 E7 C% \ r( W( c( q3 e- d9 V/ M/ A. T
Now go back to the content type we have just created.* L3 Y" l1 X' {1 m% z, z) H9 X
Click on Manage Display Field.* ~+ X1 \2 |! e: c) }" h0 m
4 ^* a6 Y( c' i/ g l$ J+ g) L8 TNext to Image field is a dropdown labelled as Format.' h, p5 Y: C9 D
$ D( G; a/ A' Q z* U* TSelect Colorbox and configure the settings for the field.
1 ?" q2 I5 p+ }5 ^- R( H* M [0 m$ ~+ ?5 O! y5 x
Node Image Style : Smaller Image style.( a& W+ S I. J# [" @* ]
, ~$ u9 u1 w5 L" o7 y1 AColorbox Image Stye : Large Image Style., J, J& H9 p+ ^6 |0 p
I7 K- Z: v1 j; o' Z+ D+ S
Click Save.
h7 O$ B+ q3 l! G7 }
/ o/ s0 }" n( UNow you can see your images in a colorbox by clicking on them.& w5 p! Y8 Q9 T- i+ }
0 d) w; Y( o- H2 `% I& q# _You can also use the Colorbox Stylesheets. Just copy the whole folder into your theme folder include in into your template files.
+ D: a/ Q/ W0 @7 g8 X
6 K4 w2 e: F; W( _5 u) m* eWith 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.4 N3 C9 H$ K* B! z& t, e# ~
0 k' ]' F/ Q7 H/ w/ T) ?; z% L7 z
0 z1 ?3 {+ f+ g7 q% Q$ z4 D" s s2 A$ H9 Y5 s- v2 t4 M
% Z! Q& L8 d% W6 l) i5 L9 c
( Y( {, h1 J$ D" m7 y% F5 u
|
|
发表于 8-29-2011 04:52