README.txt

   1 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 images, image groups, slideshow, ajax, inline, and
  36   iframed content.
  37 * Appearance is controlled through CSS so users can restyle the box.
  38 * Preloads background images and can preload upcoming images in a
  39   photo group.
  40 * Generates W3C valid XHTML and adds no JS global variables and
  41   passes JSLint.
  42 * Tested in Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome,
  43   Internet Explorer 6, 7, 8.
  44 * Released under the MIT License.
  45
  46
  47 Installation:
  48 ------------
  49 1. Download and unpack the Libraries module directory in your modules folder
  50    (this will usually be "sites/all/modules/").
  51    Link: http://drupal.org/project/libraries
  52 2. Download and unpack the Colorbox module directory in your modules folder
  53    (this will usually be "sites/all/modules/").
  54 3. Download and unpack the Colorbox plugin in "sites/all/libraries".
  55     Make sure the path to the plugin file becomes:
  56     "sites/all/libraries/colorbox/jquery.colorbox-min.js"
  57    Link: https://github.com/jackmoore/colorbox/archive/1.x.zip
  58    Drush users can use the command "drush colorbox-plugin".
  59 4. Go to "Administer" -> "Modules" and enable the Colorbox module.
  60
  61
  62 Configuration:
  63 -------------
  64 Go to "Configuration" -> "Media" -> "Colorbox" to find
  65 all the configuration options.
  66
  67
  68 Use the Views Colorbox Trigger field:
  69 ------------------------------------
  70 TODO
  71
  72
  73 Add a custom Colorbox style to your theme:
  74 ----------------------------------------
  75 The easiest way is to start with either the default style or one of the
  76 example styles included in the Colorbox JS library download. Simply copy the entire
  77 style folder to your theme and rename it to something logical like "mycolorbox".
  78 Inside that folder are both a .css and .js file, rename both of those as well to match
  79 your folder name: i.e. "colorbox_mycolorbox.css" and "colorbox_mycolorbox.js"
  80
  81 Add entries in your theme's .info file for the Colorbox CSS/JS files:
  82
  83 stylesheets[all][] = mycolorbox/colorbox_mycolorbox.css
  84 scripts[] = mycolorbox/colorbox_mycolorbox.js
  85
  86 Go to "Configuration" -> "Media" -> "Colorbox" and select "None" under
  87 "Styles and Options". This will leave the styling of Colorbox up to your theme.
  88 Make any CSS adjustments to your "colorbox_mycolorbox.css" file.
  89
  90
  91 Load images from custom links in a Colorbox:
  92 --------------------------------------------
  93
  94 Add the class "colorbox" to the link and point the src to the image
  95 you want to display in the Colorbox.
  96
  97
  98 Load content in a Colorbox:
  99 ---------------------------
 100 Check the "Enable Colorbox load" option in Colorbox settings.
 101
 102 This enables custom links that can open content in a Colorbox.
 103 Add the class "colorbox-load" to the link and build the url like
 104 this "[path]?width=500&height=500&iframe=true"
 105 or "[path]?width=500&height=500" if you don't want an iframe.
 106
 107 Other modules may activate this for easy Colorbox integration.
 108
 109
 110 Load inline content in a Colorbox:
 111 ----------------------------------
 112 Check the "Enable Colorbox inline"  option in Colorbox settings.
 113
 114 This enables custom links that can open inline content in a Colorbox.
 115 Inline in this context means some part/tag of the current page, e.g. a div.
 116 Replace "id-of-content" with the id of the tag you want to open.
 117
 118 Add the class "colorbox-inline" to the link and build the url like
 119 this "?width=500&height=500&inline=true#id-of-content".
 120
 121 It could e.g. look like this.
 122
 123 <a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">Link to click</a>
 124
 125 <div style="display: none;">
 126 <div id="id-of-content">What ever content you want to display in a Colorbox.</div>
 127 </div>
 128
 129 Other modules may activate this for easy Colorbox integration.
 130
 131
 132 Drush:
 133 ------
 134 A Drush command is provides for easy installation of the Colorbox
 135 plugin itself.
 136
 137 % drush colorbox-plugin
 138
 139 The command will download the plugin and unpack it in "sites/all/libraries".
 140 It is possible to add another path as an option to the command, but not
 141 recommended unless you know what you are doing.
 142
 143
 144 Image in Colorbox not displayed in Internet Explorer 8:
 145 -------------------------------------------------------
 146
 147 If your theme has CSS like this (popular in responsive design):
 148
 149 img {
 150   max-width: 100%;
 151 }
 152
 153 Internet Explorer 8 will have problems with showing images in the Colorbox.
 154 The fix is to add this to the theme CSS:
 155
 156 #cboxLoadedContent img {
 157   max-width: none;
 158 }
 159