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 https://www.drupal.org/project/colorbox.

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.

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.

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

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:

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 colorbox.theme.inc (/sites/all/modules/colorbox/colorbox.theme.inc) 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: