TGF Colorbox integration

Here you will learn how to configure Total Gallery Formatter to make it open the images in Colorbox.

Download and Install the Colorbox

Go to

Download and install the module following the instructions given there.

Configure the formatter

Inside the formatter settings you will see the colorbox options when you edit the formatter.
Colorbox options



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.


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.

Showing Galleria in a Colorbox

This howto describes how to get a Galleria image gallery going in a colorbox.

Colorbox - Adding a hyperlink to the photo's caption

This tutorial will show you how to add a link to the caption of an image that appears in the Colorbox pop up.

Here's what I mean:

Screenshot of caption link

My images are individual nodes so they do have a unique URL which contains the photos' description, comments and other information. I thought it would be easy to have the photo caption link to the node page but after a few hours of hacking away at the theme_colorbox_image_formatter() function, I realized that the image title (ie. caption) is being generated via JavaScript and it wouldn't be possible to link to the node (at least not when rendering the colorbox gallery via Views).

So, here's how I turned the photo caption into a link to the node page.

I'm using:
Views 7.x-3.3
Colorbox 7.x-1.2

1. Copy the following functions from (/sites/all/modules/colorbox/ into your theme's template.php file:

- theme_colorbox_image_formatter()
- theme_colorbox_imagefield()

2. Change "theme_" to your theme's name. In my case, I'm using the Corolla theme so I changed the previous function names to:

- corolla_colorbox_image_formatter()
- corolla_colorbox_imagefield()

3. In the corolla_colorbox_image_formatter() function change this:

Subscribe with RSS Subscribe to RSS - colorbox