Newer
Older
Drupal colorbox module:
------------------------
Maintainers:
Fredrik Jonsson (http://drupal.org/user/5546)
Joe Wheaton (http://drupal.org/user/298179)
License - GPL (see LICENSE)
Overview:
--------
Fredrik Jonsson
committed
Colorbox is a lightweight customizable lightbox plugin for jQuery
1.3 and 1.4. This module allows for integration of Colorbox into Drupal.
The jQuery library is a part of Drupal since version 5+.
Fredrik Jonsson
committed
Images, forms, iframed or inline content etc. can be displayed in a
overlay above the current page.
* jQuery - http://jquery.com/
* Colorbox - http://colorpowered.com/colorbox/
Fredrik Jonsson
committed
Features:
---------
Fredrik Jonsson
committed
The Colorbox module:
* Excellent integration with Image field and Image styles
Fredrik Jonsson
committed
* Choose between a default style and 5 example styles that are included.
* Style the Colorbox with a custom colorbox.css file in your theme.
* Option to open a login form by clicking on any login link
* Simple API to open any form in a Colorbox
Fredrik Jonsson
committed
* Drush command to download and install the Colorbox plugin in
Fredrik Jonsson
committed
sites/all/libraries
Fredrik Jonsson
committed
The Colorbox plugin:
Fredrik Jonsson
committed
* Supports images, image groups, slideshow, ajax, inline, and
iframed content.
* Appearance is controlled through CSS so users can restyle the box.
* Preloads background images and can preload upcoming images in a
photo group.
* Generates W3C valid XHTML and adds no JS global variables and
passes JSLint.
* Tested in Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome,
Internet Explorer 6, 7, 8.
* Released under the MIT License.
Installation:
------------
1. Download and unpack the Colorbox plugin in "sites/all/libraries".
Fredrik Jonsson
committed
Link: http://colorpowered.com/colorbox/colorbox.zip
Fredrik Jonsson
committed
Drush users can use the command "drush colorbox-plugin".
2. Download and unpack the Colorbox module directory in your modules folder
(this will usually be "sites/all/modules/").
3. Go to "Administer" -> "Modules" and enable the module.
Fredrik Jonsson
committed
If you want to use Colorbox with the Embedded Media Field module
please check "Enable Colorbox load" in the settings.
Configuration:
-------------
Fredrik Jonsson
committed
Go to "Configuration" -> "Media" -> "Colorbox" to find
all the configuration options.
Fredrik Jonsson
committed
Use the Views Colorbox Trigger field:
------------------------------------
TODO
Add a custom Colorbox style to your theme:
----------------------------------------
The easiest is to start with either the default style or one of the
Fredrik Jonsson
committed
example styles from the Colorbox plugin. Simply copy the whole
style folder to the theme and rename it and the files to
something logical.
Add entries in the themes info file for the Colorbox CSS/JS files.
In the Colorbox settings select "None" as style. This will leave the
styling of Colorbox up to your theme.
Load a selection of forms in a Colorbox:
----------------------------------------
Check the "Enable Colorbox load" option in Colorbox settings.
Fredrik Jonsson
committed
Fredrik Jonsson
committed
The following form_id can be used:
* contact_mail_page
* user_login
* user_login_block
* user_register
* user_pass
The links to open a form needs the class "colorbox-load". The URL should look like this.
Fredrik Jonsson
committed
"/colorbox/form/[form_id]?destination=[path_to_send_user_to_after_submit]&width=[with_in_pixel]&height=[height_in_pixel]".
Fredrik Jonsson
committed
Here is an example where the user register form is opened in an
500 by 250 pixel Colorbox.
<a class="colorbox-load" href="/colorbox/form/user_register_form?destination=user&width=500&height=250">Create new account</a>
Fredrik Jonsson
committed
Load inline content in a Colorbox:
----------------------------------
Check the "Enable Colorbox inline" option in Colorbox settings.
This enables custom links that can open inline content in a Colorbox. Add the class "colorbox-inline" to the link and build the url like this "?width=500&height=500&inline=true#id-of-content". Other modules may activate this for easy Colorbox integration.
Fredrik Jonsson
committed
Drush:
------
A Drush command is provides for easy installation of the Colorbox
Fredrik Jonsson
committed
plugin itself.
Fredrik Jonsson
committed
Fredrik Jonsson
committed
% drush colorbox-plugin
Fredrik Jonsson
committed
Fredrik Jonsson
committed
The command will download the plugin and unpack it in "sites/all/libraries".
It is possible to add another path as an option to the command, but not
Fredrik Jonsson
committed
recommended unless you know what you are doing.
Fredrik Jonsson
committed
Example styles borders do not display in Internet Explorer:
----------------------------------------------------------
If you use one of the example styles and have problems with the border
images not loading in Internet Explorer please read
http://colorpowered.com/colorbox/#help_paths.
The default style in Colorbox module does not have this problem.
Contributions:
-------------
* Porting all features from the Thickbox module,
by Fredrik Jonsson (http://drupal.org/user/5546).
* Image module integration improvements by recrit
(http://drupal.org/user/452914).
* Help with testing and many good suggestions by Shane
(http://drupal.org/user/262473).
Last updated:
------------