1 |
85ad3d82
|
Assos Assos
|
Drupal colorbox module:
|
2 |
|
|
------------------------
|
3 |
|
|
Maintainers:
|
4 |
|
|
Fredrik Jonsson (http://drupal.org/user/5546)
|
5 |
|
|
Requires - Drupal 7
|
6 |
|
|
License - GPL (see LICENSE)
|
7 |
|
|
|
8 |
|
|
|
9 |
|
|
Overview:
|
10 |
|
|
--------
|
11 |
|
|
Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.4.3+.
|
12 |
|
|
This module allows for integration of Colorbox into Drupal.
|
13 |
|
|
The jQuery library is a part of Drupal since version 5+.
|
14 |
|
|
|
15 |
|
|
Images, iframed or inline content etc. can be displayed in a
|
16 |
|
|
overlay above the current page.
|
17 |
|
|
|
18 |
|
|
* jQuery - http://jquery.com/
|
19 |
|
|
* Colorbox - http://www.jacklmoore.com/colorbox/
|
20 |
|
|
|
21 |
|
|
|
22 |
|
|
Features:
|
23 |
|
|
---------
|
24 |
|
|
|
25 |
|
|
The Colorbox module:
|
26 |
|
|
|
27 |
|
|
* Excellent integration with Image field and Image styles
|
28 |
|
|
* Choose between a default style and 5 example styles that are included.
|
29 |
|
|
* Style the Colorbox with a custom colorbox.css file in your theme.
|
30 |
|
|
* Drush command to download and install the Colorbox plugin in
|
31 |
|
|
sites/all/libraries
|
32 |
|
|
|
33 |
|
|
The Colorbox plugin:
|
34 |
|
|
|
35 |
|
|
* Supports photos, grouping, slideshow, ajax, inline, and iframed content.
|
36 |
|
|
* Appearance is controlled through CSS so it can be restyled.
|
37 |
|
|
* Preloads upcoming images in a photo group.
|
38 |
|
|
* Completely unobtrusive, options are set in the JS and require no
|
39 |
|
|
changes to existing HTML.
|
40 |
|
|
* Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera,
|
41 |
|
|
Internet Explorer 7+.
|
42 |
|
|
* Released under the MIT License.
|
43 |
|
|
|
44 |
|
|
|
45 |
|
|
Installation:
|
46 |
|
|
------------
|
47 |
|
|
1. Download and unpack the Libraries module directory in your modules folder
|
48 |
|
|
(this will usually be "sites/all/modules/").
|
49 |
|
|
Link: http://drupal.org/project/libraries
|
50 |
|
|
2. Download and unpack the Colorbox module directory in your modules folder
|
51 |
|
|
(this will usually be "sites/all/modules/").
|
52 |
|
|
3. Download and unpack the Colorbox plugin in "sites/all/libraries".
|
53 |
|
|
Make sure the path to the plugin file becomes:
|
54 |
|
|
"sites/all/libraries/colorbox/jquery.colorbox-min.js"
|
55 |
|
|
Link: https://github.com/jackmoore/colorbox/archive/1.x.zip
|
56 |
|
|
Drush users can use the command "drush colorbox-plugin".
|
57 |
|
|
4. Go to "Administer" -> "Modules" and enable the Colorbox module.
|
58 |
|
|
|
59 |
|
|
|
60 |
|
|
Configuration:
|
61 |
|
|
-------------
|
62 |
|
|
Go to "Configuration" -> "Media" -> "Colorbox" to find
|
63 |
|
|
all the configuration options.
|
64 |
|
|
|
65 |
|
|
|
66 |
|
|
Use the Views Colorbox Trigger field:
|
67 |
|
|
------------------------------------
|
68 |
|
|
TODO
|
69 |
|
|
|
70 |
|
|
|
71 |
|
|
Add a custom Colorbox style to your theme:
|
72 |
|
|
----------------------------------------
|
73 |
|
|
The easiest way is to start with either the default style or one of the
|
74 |
|
|
example styles included in the Colorbox JS library download. Simply copy the entire
|
75 |
|
|
style folder to your theme and rename it to something logical like "mycolorbox".
|
76 |
|
|
Inside that folder are both a .css and .js file, rename both of those as well to match
|
77 |
|
|
your folder name: i.e. "colorbox_mycolorbox.css" and "colorbox_mycolorbox.js"
|
78 |
|
|
|
79 |
|
|
Add entries in your theme's .info file for the Colorbox CSS/JS files:
|
80 |
|
|
|
81 |
|
|
stylesheets[all][] = mycolorbox/colorbox_mycolorbox.css
|
82 |
|
|
scripts[] = mycolorbox/colorbox_mycolorbox.js
|
83 |
|
|
|
84 |
|
|
Go to "Configuration" -> "Media" -> "Colorbox" and select "None" under
|
85 |
|
|
"Styles and Options". This will leave the styling of Colorbox up to your theme.
|
86 |
|
|
Make any CSS adjustments to your "colorbox_mycolorbox.css" file.
|
87 |
|
|
|
88 |
|
|
|
89 |
|
|
Load images from custom links in a Colorbox:
|
90 |
|
|
--------------------------------------------
|
91 |
|
|
|
92 |
62f5c69e
|
Assos Assos
|
Add the class "colorbox" to the link and point its href attribute to the image
|
93 |
85ad3d82
|
Assos Assos
|
you want to display in the Colorbox.
|
94 |
|
|
|
95 |
|
|
|
96 |
|
|
Load content in a Colorbox:
|
97 |
|
|
---------------------------
|
98 |
|
|
Check the "Enable Colorbox load" option in Colorbox settings.
|
99 |
|
|
|
100 |
|
|
This enables custom links that can open content in a Colorbox.
|
101 |
|
|
Add the class "colorbox-load" to the link and build the url like
|
102 |
|
|
this "[path]?width=500&height=500&iframe=true"
|
103 |
|
|
or "[path]?width=500&height=500" if you don't want an iframe.
|
104 |
|
|
|
105 |
|
|
Other modules may activate this for easy Colorbox integration.
|
106 |
|
|
|
107 |
|
|
|
108 |
|
|
Load inline content in a Colorbox:
|
109 |
|
|
----------------------------------
|
110 |
|
|
Check the "Enable Colorbox inline" option in Colorbox settings.
|
111 |
|
|
|
112 |
|
|
This enables custom links that can open inline content in a Colorbox.
|
113 |
|
|
Inline in this context means some part/tag of the current page, e.g. a div.
|
114 |
|
|
Replace "id-of-content" with the id of the tag you want to open.
|
115 |
|
|
|
116 |
|
|
Add the class "colorbox-inline" to the link and build the url like
|
117 |
|
|
this "?width=500&height=500&inline=true#id-of-content".
|
118 |
|
|
|
119 |
|
|
It could e.g. look like this.
|
120 |
|
|
|
121 |
|
|
<a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">Link to click</a>
|
122 |
|
|
|
123 |
|
|
<div style="display: none;">
|
124 |
|
|
<div id="id-of-content">What ever content you want to display in a Colorbox.</div>
|
125 |
|
|
</div>
|
126 |
|
|
|
127 |
|
|
Other modules may activate this for easy Colorbox integration.
|
128 |
|
|
|
129 |
|
|
|
130 |
|
|
Drush:
|
131 |
|
|
------
|
132 |
|
|
A Drush command is provides for easy installation of the Colorbox
|
133 |
|
|
plugin itself.
|
134 |
|
|
|
135 |
|
|
% drush colorbox-plugin
|
136 |
|
|
|
137 |
|
|
The command will download the plugin and unpack it in "sites/all/libraries".
|
138 |
|
|
It is possible to add another path as an option to the command, but not
|
139 |
|
|
recommended unless you know what you are doing.
|
140 |
|
|
|
141 |
|
|
|
142 |
|
|
Image in Colorbox not displayed in Internet Explorer 8:
|
143 |
|
|
-------------------------------------------------------
|
144 |
|
|
|
145 |
|
|
If your theme has CSS like this (popular in responsive design):
|
146 |
|
|
|
147 |
|
|
img {
|
148 |
|
|
max-width: 100%;
|
149 |
|
|
}
|
150 |
|
|
|
151 |
|
|
Internet Explorer 8 will have problems with showing images in the Colorbox.
|
152 |
|
|
The fix is to add this to the theme CSS:
|
153 |
|
|
|
154 |
|
|
#cboxLoadedContent img {
|
155 |
|
|
max-width: none;
|
156 |
|
|
}
|