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

  return theme('colorbox_imagefield', array('image' => $image, 'path' => $path, 'title' => $caption, 'gid' => $gallery_id));

To this:

  $img_node_url_options = array('absolute' => TRUE);
  $img_node_url = url('node/' . $node->nid, $img_node_url_options);
  
  return theme('colorbox_imagefield', array('url' => $img_node_url, 'image' => $image, 'path' => $path, 'title' => $caption.'|||'.$node->nid, 'gid' => $gallery_id));

Basically, we are getting the photo's node URL and adding a separator to the caption. In this case, I'm using "|||" as the separator. You can use what you want but you'll also have to update your JavaScript to match.

4. In the corolla_colorbox_imagefield() function change this:

  $options = array(
    'html' => TRUE,
    'attributes' => array(
      'title' => $variables['title'],
      'class' => implode(' ', $class),
      'rel' => $variables['gid'],
    )
  );

To this:

  $options = array(
    'html' => TRUE,
    'attributes' => array(
      'title' => $variables['title'],
      'class' => implode(' ', $class),
      'rel' => $variables['gid'],
      'url' => $variables['url'],
    )
  );

This just passes the node's URL as an attribute to the hyperlink that links to the image.

5. Now we need to add some JavaScript (or more specifically, jQuery) to our page. The method I have chosen is to create a small JavaScript file which holds the necessary code and call it from my theme's .info file like this:

scripts[] = custom.js

6. Add the following code to your custom.js file:

(function ($) {
  Drupal.behaviors.addLinkToColorboxCaption =  {
    attach: function(context, settings) {
      var imgTitle = $('#cboxTitle').text();
      var titleArray = imgTitle.split("|||");    
      var url = $("a[title='"+imgTitle+"']").attr("url");
      $('#cboxTitle').html('<a href="'+url+'" target="_blank" title="View this image\'s details.">'+titleArray[0]+'</a>');
    }
  };
})(jQuery);

Now that you have added 2 new functions to your template.php file and added a new JavaScript file and called that file on your page loads, your Colorbox captions should contain a hyperlink to the photo's node page.

Hope that helps,
Eric

AttachmentSize
Screenshot of Caption Link325.13 KB

Comments

zhiyi’s picture

Is this possible? I'm trying to have html tags within the colorbox popup window caption, so I can create multi-line and left and right aligned elements in the caption, only using what is in the body of the image node.

Any help would be appreciate!

atiba’s picture

Thank you so much for this short tutorial. It's what I needed!

lolandese’s picture

danon1981’s picture

It seems to work up to the part that the url returns the nid, it does not get retrieved and I end up with

Notice: Trying to get property of non-object in theme_colorbox_image_formatter()

and

Notice: Undefined variable: node in theme_colorbox_image_formatter()

The code that is pointed to:

$img_node_url_options = array('absolute' => TRUE);
  $img_node_url = url('node/'. $node->nid, $img_node_url_options);
  
  return theme('colorbox_imagefield', array('url' => $img_node_url, 'image' => $image, 'path' => $path, 'title' => $caption.'|||'.$node->nid, 'gid' => $gallery_id));

How do I retrieve the Nid to be used in the url?

The colorbox version i'm using is version 7.X-2.7

ianchan’s picture

Did you find a solution to this problem?

Thanks

Head of Library Technology Initiatives and Development
California State University San Marcos
http://biblio.csusm.edu/

tvalimaa’s picture

Change:
$img_node_url = url('node/'. $node->nid, $img_node_url_options);
to
$img_node_url = url('node/'. $entity->nid, $img_node_url_options);

danon1981’s picture

@tvalminaa, That solved the problem and now I realise that was quite obvious. Thanks for pointing me in the entity direction can't believe I didn't even think of that.

singh_haneet’s picture

Yeah that solved the problem of getting nid for the node. Thanks a ton.

Surya1988’s picture

While clicking link of the image , i got the "The requested page "/undefined" could not be found.
" error.
The link has been created but its not going to the node page..

Please ;( help me out.......