1
|
CONTENTS OF THIS FILE
|
2
|
---------------------
|
3
|
|
4
|
* Introduction
|
5
|
* Features
|
6
|
* Requirements
|
7
|
* Installation
|
8
|
* Configuration
|
9
|
* Use the Views Colorbox Trigger field
|
10
|
* Add a custom Colorbox style to your theme
|
11
|
* Load images from custom links in a Colorbox
|
12
|
* Load content in a Colorbox
|
13
|
* Load inline content in a Colorbox
|
14
|
* Drush
|
15
|
* Image in Colorbox not displayed in Internet Explorer 8
|
16
|
* Maintainers
|
17
|
|
18
|
|
19
|
INTRODUCTION
|
20
|
------------
|
21
|
|
22
|
Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.4.3+.
|
23
|
This module allows for integration of Colorbox into Drupal.
|
24
|
The jQuery library is a part of Drupal since version 5+.
|
25
|
|
26
|
Images, iframed or inline content etc. can be displayed in a
|
27
|
overlay above the current page.
|
28
|
|
29
|
* jQuery - http://jquery.com/
|
30
|
* Colorbox - http://www.jacklmoore.com/colorbox/
|
31
|
|
32
|
|
33
|
FEATURES:
|
34
|
---------
|
35
|
|
36
|
The Colorbox:
|
37
|
|
38
|
* Excellent integration with Image field and Image styles
|
39
|
* Choose between a default style and 5 example styles that are included.
|
40
|
* Style the Colorbox with a custom colorbox.css file in your theme.
|
41
|
* Drush command to download and install the Colorbox plugin in
|
42
|
sites/all/libraries
|
43
|
|
44
|
The Colorbox plugin:
|
45
|
|
46
|
* Supports photos, grouping, slideshow, ajax, inline, and iframed content.
|
47
|
* Appearance is controlled through CSS so it can be restyled.
|
48
|
* Preloads upcoming images in a photo group.
|
49
|
* Completely unobtrusive, options are set in the JS and require no
|
50
|
changes to existing HTML.
|
51
|
* Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera,
|
52
|
Internet Explorer 7+.
|
53
|
* Released under the MIT License.
|
54
|
|
55
|
|
56
|
REQUIREMENTS
|
57
|
------------
|
58
|
|
59
|
This module requires the following modules:
|
60
|
|
61
|
* Libraries API (https://www.drupal.org/project/libraries)
|
62
|
|
63
|
|
64
|
INSTALLATION
|
65
|
------------
|
66
|
|
67
|
1. Download and unpack the Libraries module directory in your modules folder
|
68
|
(this will usually be "sites/all/modules/").
|
69
|
Link: http://drupal.org/project/libraries
|
70
|
|
71
|
2. Download and unpack the Colorbox module directory in your modules folder
|
72
|
(this will usually be "sites/all/modules/").
|
73
|
|
74
|
3. Download and unpack the Colorbox plugin in "sites/all/libraries".
|
75
|
Make sure the path to the plugin file becomes:
|
76
|
"sites/all/libraries/colorbox/jquery.colorbox-min.js"
|
77
|
Link: https://github.com/jackmoore/colorbox/archive/1.x.zip
|
78
|
Drush users can use the command "drush colorbox-plugin".
|
79
|
|
80
|
4. Go to "Administer" -> "Modules" and enable the Colorbox.
|
81
|
|
82
|
Install as you would normally install a contributed Drupal module. See:
|
83
|
https://drupal.org/documentation/install/modules-themes/modules-7 for
|
84
|
further information.
|
85
|
|
86
|
Note:
|
87
|
If you download the Colorbox plugin using the makefile included you should
|
88
|
assurance that unzip command is available on your host.
|
89
|
|
90
|
|
91
|
CONFIGURATION
|
92
|
-------------
|
93
|
|
94
|
* Go to "Configuration" » "Media" » "Colorbox" to find all the configuration
|
95
|
options.
|
96
|
|
97
|
|
98
|
USE THE VIEWS COLORBOX TRIGGER FIELD
|
99
|
------------------------------------
|
100
|
TODO
|
101
|
|
102
|
|
103
|
ADD A CUSTOM COLORBOX STYLE TO YOUR THEME
|
104
|
----------------------------------------
|
105
|
The easiest way is to start with either the default style or one of the
|
106
|
example styles included in the Colorbox JS library download. Simply copy the
|
107
|
entire style folder to your theme and rename it to something logical like
|
108
|
"mycolorbox". Inside that folder are both a .css and .js file, rename both of
|
109
|
those as well to match your folder name: i.e. "colorbox_mycolorbox.css" and
|
110
|
"colorbox_mycolorbox.js"
|
111
|
|
112
|
Add entries in your theme's .info file for the Colorbox CSS/JS files:
|
113
|
|
114
|
stylesheets[all][] = mycolorbox/colorbox_mycolorbox.css
|
115
|
scripts[] = mycolorbox/colorbox_mycolorbox.js
|
116
|
|
117
|
Go to "Configuration" -> "Media" -> "Colorbox" and select "None" under
|
118
|
"Styles and Options". This will leave the styling of Colorbox up to your theme.
|
119
|
Make any CSS adjustments to your "colorbox_mycolorbox.css" file.
|
120
|
|
121
|
|
122
|
LOAD IMAGES FROM CUSTOM LINKS IN A COLORBOX
|
123
|
--------------------------------------------
|
124
|
|
125
|
Add the class "colorbox" to the link and point its href attribute to the image
|
126
|
you want to display in the Colorbox.
|
127
|
|
128
|
|
129
|
LOAD CONTENT IN A COLORBOX
|
130
|
---------------------------
|
131
|
Check the "Enable Colorbox load" option in Colorbox settings.
|
132
|
|
133
|
This enables custom links that can open content in a Colorbox.
|
134
|
Add the class "colorbox-load" to the link and build the url like
|
135
|
this "[path]?width=500&height=500&iframe=true"
|
136
|
or "[path]?width=500&height=500" if you don't want an iframe.
|
137
|
|
138
|
Other modules may activate this for easy Colorbox integration.
|
139
|
|
140
|
|
141
|
LOAD INLINE CONTENT IN A COLORBOX
|
142
|
----------------------------------
|
143
|
Check the "Enable Colorbox inline" option in Colorbox settings.
|
144
|
|
145
|
This enables custom links that can open inline content in a Colorbox.
|
146
|
Inline in this context means some part/tag of the current page, e.g. a div.
|
147
|
Replace "id-of-content" with the id of the tag you want to open.
|
148
|
|
149
|
Add the class "colorbox-inline" to the link and build the url like
|
150
|
this "?width=500&height=500&inline=true#id-of-content".
|
151
|
|
152
|
It could e.g. look like this.
|
153
|
|
154
|
<a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">
|
155
|
Link to click
|
156
|
</a>
|
157
|
|
158
|
<div style="display: none;">
|
159
|
<div id="id-of-content">
|
160
|
What ever content you want to display in a Colorbox.
|
161
|
</div>
|
162
|
</div>
|
163
|
|
164
|
Other modules may activate this for easy Colorbox integration.
|
165
|
|
166
|
|
167
|
DRUSH
|
168
|
------
|
169
|
A Drush command is provides for easy installation of the Colorbox
|
170
|
plugin itself.
|
171
|
|
172
|
% drush colorbox-plugin
|
173
|
|
174
|
The command will download the plugin and unpack it in "sites/all/libraries".
|
175
|
It is possible to add another path as an option to the command, but not
|
176
|
recommended unless you know what you are doing.
|
177
|
|
178
|
|
179
|
IMAGE IN COLORBOX NOT DISPLAYED IN INTERNET EXPLORER 8
|
180
|
-------------------------------------------------------
|
181
|
|
182
|
If your theme has CSS like this (popular in responsive design):
|
183
|
|
184
|
img {
|
185
|
max-width: 100%;
|
186
|
}
|
187
|
|
188
|
Internet Explorer 8 will have problems with showing images in the Colorbox.
|
189
|
The fix is to add this to the theme CSS:
|
190
|
|
191
|
#cboxLoadedContent img {
|
192
|
max-width: none;
|
193
|
}
|
194
|
|
195
|
|
196
|
MAINTAINERS
|
197
|
-----------
|
198
|
|
199
|
Current maintainers:
|
200
|
* Fredrik Jonsson (frjo) - https://www.drupal.org/user/5546
|
201
|
* Joe Wheaton (jdwfly) - https://www.drupal.org/user/298179
|
202
|
* Renato Gonçalves (RenatoG) - https://www.drupal.org/user/3326031
|
203
|
* Sam Becker (Sam152) - https://www.drupal.org/user/1485048
|
204
|
* rsmylski - https://www.drupal.org/user/1324348
|
205
|
* lsolesen - https://www.drupal.org/user/527206
|