Same filename and directory in other branches
  1. 2.0.x README.txt 1 comment
  2. 7.x-1.x README.txt 1 comment
  3. 8.x-1.x README.txt 1 comment
CONTENTS OF THIS FILE
---------------------

 * Introduction
 * Features
 * Requirements
 * Installation
 * Configuration
 * Use the Views Colorbox Trigger field
 * Add a custom Colorbox style to your theme
 * Load images from custom links in a Colorbox
 * Load content in a Colorbox
 * Load inline content in a Colorbox
 * Drush
 * Image in Colorbox not displayed in Internet Explorer 8
 * Maintainers


INTRODUCTION
------------

Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.4.3+.
This module allows for integration of Colorbox into Drupal.
The jQuery library is a part of Drupal since version 5+.

Images, iframed or inline content etc. can be displayed in a
overlay above the current page.

* jQuery - http://jquery.com/
* Colorbox - http://www.jacklmoore.com/colorbox/


OPTIONAL HTML CAPTIONS
----------------------
Colorbox allows you to place a caption at the bottom of the lightbox.
If you wish to use HTML in your captions, you must install the DOMPurify
library. In your libraries folder, you will need DOMPurify/purify.min.js.

You can download DOMPurify from:
https://github.com/cure53/DOMPurify/releases/latest

From the above link, you can download a zip or tar.gz archive file.
To avoid security issues, please only install the purify.min.js file, and
not any other files from the archive.

The DOMPurify library is optional. Without DOMPurify, the Colorbox module
will convert all captions to plain text.


FEATURES:
---------

The Colorbox:

* Excellent integration with Image field and Image styles
* Choose between a default style and 5 example styles that are included.
* Style the Colorbox with a custom colorbox.css file in your theme.
* Drush command to download and install the Colorbox plugin in
  sites/all/libraries

The Colorbox plugin:

* Supports photos, grouping, slideshow, ajax, inline, and iframed content.
* Appearance is controlled through CSS so it can be restyled.
* Preloads upcoming images in a photo group.
* Completely unobtrusive, options are set in the JS and require no
  changes to existing HTML.
* Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera,
  Internet Explorer 7+.
* Released under the MIT License.


REQUIREMENTS
------------

This module requires the following modules:

 * Libraries API (https://www.drupal.org/project/libraries)


INSTALLATION
------------

 1. Download and unpack the Libraries module directory in your modules folder
    (this will usually be "sites/all/modules/").
    Link: http://drupal.org/project/libraries

 2. Download and unpack the Colorbox module directory in your modules folder
    (this will usually be "sites/all/modules/").

 3. Download and unpack the Colorbox plugin in "sites/all/libraries".
    Make sure the path to the plugin file becomes:
    "sites/all/libraries/colorbox/jquery.colorbox-min.js"
    Link: https://github.com/jackmoore/colorbox/archive/1.x.zip
    Drush users can use the command "drush colorbox-plugin".

 4. Go to "Administer" -> "Modules" and enable the Colorbox.

    Install as you would normally install a contributed Drupal module. See:
    https://drupal.org/documentation/install/modules-themes/modules-7 for
    further information.

    Note:
    If you download the Colorbox plugin using the makefile included you should
    ensure the unzip command is available on your host.


CONFIGURATION
-------------

 * Go to "Configuration" » "Media" » "Colorbox" to find all the configuration
   options.


USE THE VIEWS COLORBOX TRIGGER FIELD
------------------------------------
TODO


ADD A CUSTOM COLORBOX STYLE TO YOUR THEME
----------------------------------------
The easiest way is to start with either the default style or one of the
example styles included in the Colorbox JS library download. Simply copy the
entire style folder to your theme and rename it to something logical like
"mycolorbox". Inside that folder are both a .css and .js file, rename both of
those as well to  match your folder name: i.e. "colorbox_mycolorbox.css" and
"colorbox_mycolorbox.js"

Add entries in your theme's .info file for the Colorbox CSS/JS files:

stylesheets[all][] = mycolorbox/colorbox_mycolorbox.css
scripts[] = mycolorbox/colorbox_mycolorbox.js

Go to "Configuration" -> "Media" -> "Colorbox" and select "None" under
"Styles and Options". This will leave the styling of Colorbox up to your theme.
Make any CSS adjustments to your "colorbox_mycolorbox.css" file.


LOAD IMAGES FROM CUSTOM LINKS IN A COLORBOX
--------------------------------------------

Add the class "colorbox" to the link and point its href attribute to the image
you want to display in the Colorbox.


LOAD CONTENT IN A COLORBOX
---------------------------
Check the "Enable Colorbox load" option in Colorbox settings.

This enables custom links that can open content in a Colorbox.
Add the class "colorbox-load" to the link and build the url like
this "[path]?width=500&height=500&iframe=true"
or "[path]?width=500&height=500" if you don't want an iframe.

Other modules may activate this for easy Colorbox integration.


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.
Inline in this context means some part/tag of the current page, e.g. a div.
Replace "id-of-content" with the id of the tag you want to open.

Add the class "colorbox-inline" to the link and build the url like
this "?width=500&height=500&inline=true#id-of-content".

It could e.g. look like this.


  Link to click




  

    What ever content you want to display in a Colorbox.
  




Other modules may activate this for easy Colorbox integration.


DRUSH
------
A Drush command is provides for easy installation of the Colorbox
plugin itself.

% drush colorbox-plugin

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
recommended unless you know what you are doing.


IMAGE IN COLORBOX NOT DISPLAYED IN INTERNET EXPLORER 8
-------------------------------------------------------

If your theme has CSS like this (popular in responsive design):

img {
  max-width: 100%;
}

Internet Explorer 8 will have problems with showing images in the Colorbox.
The fix is to add this to the theme CSS:

#cboxLoadedContent img {
  max-width: none;
}


MAINTAINERS
-----------

Current maintainers:
 * Fredrik Jonsson (frjo) - https://www.drupal.org/user/5546
 * Joe Wheaton (jdwfly) - https://www.drupal.org/user/298179
 * Renato Gonçalves (RenatoG) - https://www.drupal.org/user/3326031
 * Sam Becker (Sam152) - https://www.drupal.org/user/1485048
 * rsmylski - https://www.drupal.org/user/1324348
 * lsolesen - https://www.drupal.org/user/527206

File

./README.txt

View source 
  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. OPTIONAL HTML CAPTIONS

  34. ----------------------

  35. Colorbox allows you to place a caption at the bottom of the lightbox.

  36. If you wish to use HTML in your captions, you must install the DOMPurify

  37. library. In your libraries folder, you will need DOMPurify/purify.min.js.

  38. 

  39. You can download DOMPurify from:

  40. https://github.com/cure53/DOMPurify/releases/latest

  41. 

  42. From the above link, you can download a zip or tar.gz archive file.

  43. To avoid security issues, please only install the purify.min.js file, and

  44. not any other files from the archive.

  45. 

  46. The DOMPurify library is optional. Without DOMPurify, the Colorbox module

  47. will convert all captions to plain text.

  48. 

  49. 

  50. FEATURES:

  51. ---------

  52. 

  53. The Colorbox:

  54. 

  55. * Excellent integration with Image field and Image styles

  56. * Choose between a default style and 5 example styles that are included.

  57. * Style the Colorbox with a custom colorbox.css file in your theme.

  58. * Drush command to download and install the Colorbox plugin in

  59.   sites/all/libraries

  60. 

  61. The Colorbox plugin:

  62. 

  63. * Supports photos, grouping, slideshow, ajax, inline, and iframed content.

  64. * Appearance is controlled through CSS so it can be restyled.

  65. * Preloads upcoming images in a photo group.

  66. * Completely unobtrusive, options are set in the JS and require no

  67.   changes to existing HTML.

  68. * Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera,

  69.   Internet Explorer 7+.

  70. * Released under the MIT License.

  71. 

  72. 

  73. REQUIREMENTS

  74. ------------

  75. 

  76. This module requires the following modules:

  77. 

  78.  * Libraries API (https://www.drupal.org/project/libraries)

  79. 

  80. 

  81. INSTALLATION

  82. ------------

  83. 

  84.  1. Download and unpack the Libraries module directory in your modules folder

  85.     (this will usually be "sites/all/modules/").

  86.     Link: http://drupal.org/project/libraries

  87. 

  88.  2. Download and unpack the Colorbox module directory in your modules folder

  89.     (this will usually be "sites/all/modules/").

  90. 

  91.  3. Download and unpack the Colorbox plugin in "sites/all/libraries".

  92.     Make sure the path to the plugin file becomes:

  93.     "sites/all/libraries/colorbox/jquery.colorbox-min.js"

  94.     Link: https://github.com/jackmoore/colorbox/archive/1.x.zip

  95.     Drush users can use the command "drush colorbox-plugin".

  96. 

  97.  4. Go to "Administer" -> "Modules" and enable the Colorbox.

  98. 

  99.     Install as you would normally install a contributed Drupal module. See:

  100.     https://drupal.org/documentation/install/modules-themes/modules-7 for

  101.     further information.

  102. 

  103.     Note:

  104.     If you download the Colorbox plugin using the makefile included you should

  105.     ensure the unzip command is available on your host.

  106. 

  107. 

  108. CONFIGURATION

  109. -------------

  110. 

  111.  * Go to "Configuration" » "Media" » "Colorbox" to find all the configuration

  112.    options.

  113. 

  114. 

  115. USE THE VIEWS COLORBOX TRIGGER FIELD

  116. ------------------------------------

  117. TODO

  118. 

  119. 

  120. ADD A CUSTOM COLORBOX STYLE TO YOUR THEME

  121. ----------------------------------------

  122. The easiest way is to start with either the default style or one of the

  123. example styles included in the Colorbox JS library download. Simply copy the

  124. entire style folder to your theme and rename it to something logical like

  125. "mycolorbox". Inside that folder are both a .css and .js file, rename both of

  126. those as well to  match your folder name: i.e. "colorbox_mycolorbox.css" and

  127. "colorbox_mycolorbox.js"

  128. 

  129. Add entries in your theme's .info file for the Colorbox CSS/JS files:

  130. 

  131. stylesheets[all][] = mycolorbox/colorbox_mycolorbox.css

  132. scripts[] = mycolorbox/colorbox_mycolorbox.js

  133. 

  134. Go to "Configuration" -> "Media" -> "Colorbox" and select "None" under

  135. "Styles and Options". This will leave the styling of Colorbox up to your theme.

  136. Make any CSS adjustments to your "colorbox_mycolorbox.css" file.

  137. 

  138. 

  139. LOAD IMAGES FROM CUSTOM LINKS IN A COLORBOX

  140. --------------------------------------------

  141. 

  142. Add the class "colorbox" to the link and point its href attribute to the image

  143. you want to display in the Colorbox.

  144. 

  145. 

  146. LOAD CONTENT IN A COLORBOX

  147. ---------------------------

  148. Check the "Enable Colorbox load" option in Colorbox settings.

  149. 

  150. This enables custom links that can open content in a Colorbox.

  151. Add the class "colorbox-load" to the link and build the url like

  152. this "[path]?width=500&height=500&iframe=true"

  153. or "[path]?width=500&height=500" if you don't want an iframe.

  154. 

  155. Other modules may activate this for easy Colorbox integration.

  156. 

  157. 

  158. LOAD INLINE CONTENT IN A COLORBOX

  159. ----------------------------------

  160. Check the "Enable Colorbox inline"  option in Colorbox settings.

  161. 

  162. This enables custom links that can open inline content in a Colorbox.

  163. Inline in this context means some part/tag of the current page, e.g. a div.

  164. Replace "id-of-content" with the id of the tag you want to open.

  165. 

  166. Add the class "colorbox-inline" to the link and build the url like

  167. this "?width=500&height=500&inline=true#id-of-content".

  168. 

  169. It could e.g. look like this.

  170. 

  171. 

  172.   Link to click

  173. 

  174. 

  175. 

  176.   
    

  177.     What ever content you want to display in a Colorbox.

  178.
  • Other modules may activate this for easy Colorbox integration.
  • DRUSH
  • ------
  • A Drush command is provides for easy installation of the Colorbox
  • plugin itself.
  • % drush colorbox-plugin
  • 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
  • recommended unless you know what you are doing.
  • IMAGE IN COLORBOX NOT DISPLAYED IN INTERNET EXPLORER 8
  • -------------------------------------------------------
  • If your theme has CSS like this (popular in responsive design):
  • img {
  • max-width: 100%;
  • }
  • Internet Explorer 8 will have problems with showing images in the Colorbox.
  • The fix is to add this to the theme CSS:
  • #cboxLoadedContent img {
  • max-width: none;
  • }
  • MAINTAINERS
  • -----------
  • Current maintainers:
  • * Fredrik Jonsson (frjo) - https://www.drupal.org/user/5546
  • * Joe Wheaton (jdwfly) - https://www.drupal.org/user/298179
  • * Renato Gonçalves (RenatoG) - https://www.drupal.org/user/3326031
  • * Sam Becker (Sam152) - https://www.drupal.org/user/1485048
  • * rsmylski - https://www.drupal.org/user/1324348
  • * lsolesen - https://www.drupal.org/user/527206