Last updated November 17, 2014. Created on April 16, 2013.
Edited by Dan_Rogers, Shane Birley, Chris Gillis, ultimike. Log in to edit this page.

Overview

The Colorbox module integrates the Colorbox plugin into Drupal. The Colorbox plugin is a light-weight, customizable lightbox plugin for jQuery 1.4.3+.

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

Features

The Colorbox module:

  • 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:

  • Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+
  • Supports photos, grouping, slideshow, ajax, inline, and iframed content.
  • Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
  • Appearance is controlled through CSS so it can be restyled.
  • Can be extended with callbacks & event-hooks without altering the source files.
  • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
  • Preloads upcoming images in a photo group.
  • Well vetted and currently in use in over 600,000 websites.
  • Released under the MIT License.

Installation

  1. Download and unpack the Libraries module directory in your modules folder (this will usually be "sites/all/modules/").
  2. Download and unpack the Colorbox module directory in your modules folder (this will usually be "sites/all/modules/").
  3. Download the Colorbox plugin and unpack in "sites/all/libraries". Make sure the path to the plugin file becomes: "sites/all/libraries/colorbox/jquery.colorbox-min.js".
    Drush provides a command installing the plugin:
    % 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.
  4. Go to "Administer" » "Modules" and enable the Colorbox module.

You may use the jQuery update module if you need a later version of jQuery than Drupal ships with but as long as you use the 1.x branch of the Colorbox plugin it's not a requirement.

You need to complete the above steps in order. If you enabled the colorbox module before you installed the plugin library, you may find that colorbox does not work until you reinstall the colorbox module.

Configuration

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

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 the src 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.

If you want to pass the width and height of the Colorbox as a percentage (useful for responsive designs), you can format the link like this "[path]?width=90%25&height=90%25&iframe=true" or "[path]?width=90%25&height=90%25", where the "%25" is the HTML entity for "%".

Other modules may activate this for easy Colorbox integration.

Position Colorbox

Traditionally, the Colorbox will automatically position itself close to the center of the visitors browser window. But what if you want to position this to the top, bottom, right, or left? There are some options for this within the Colorbox library but the module does not take this into account as the feature is newer.

We can, however, still pass these options along in the links we use to trigger the overlay. For example:

<a class="colorbox-load" href="http://www.example.com?width=300&height=150&top=40&right=20&iframe=true">link</a>.

Note the addition of "top=40" and "right=20". This tells Colorbox that you want the box to appear 40 pixels down from the top and 20 pixels in from the right.

The options are: top, bottom, left, and right.

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.

<a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">Link to click</a>

<div style="display: none;">
<div id="id-of-content">What ever content you want to display in a Colorbox.</div>
</div>

Alternatively instead of style="display: none;" you could use class="element-hidden".

Other modules may activate this for easy Colorbox integration.

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;
}

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

loloyd’s picture

The "Load images from custom links in a Colorbox" needs more examples such as grouping together quick links on the fly for a slideshow.

nightonfire’s picture

Use the 'rel' attribute (<a rel="xyz" ..>) on a colorbox link to create an image group or gallery. Putting the same value on the rel attribute on multiple colorbox links puts arrows on the bottom of the colorbox to switch between them directly.

outlaw82’s picture

I got some troubles in loading content, from a custom image link in colorbox windows
The solution as you can see this article (with examples) http://www.alessioligabue.it/colorbox-image-load is place the colorbox class in the div

<div>
<p><a class="colorbox" href="/imageaddress/fullquality.jpg" title="div title">
        <img alt="alt image" src="/imageaddress/minified.jpg"
         title="image title" /></a></p>
</div>

Alessio Ligabue
ICT consulting, Linux, Windows, Networking