I a have problem getting a slideshow and colorbox to play together.

How would you go if you wanted to:

  • have a set of images in a node (let's say it's a multi-value image field)
  • display just a single thumbnail as a colorbox trigger
  • open up a colorbox with a slideshow of all images in that field.

The thing I want to emphasize is the distinction between having a single thumbnail on a node display level, and the slideshow on a colorbox level. By saying 'colorbox' I mean not necessarily that particular plugin/module. I'm open to any working solution, however I must say I gave up Lightbox2 after I found it poorly configurable.

4 Answers 4


I found my way of doing this. It's a litle bit tricky, but I hope it helps.

1) Get a View where you grab all node's fields, one of them is the "image" (multi-value).

2) To create a Custom Formatter with the Field API, put this code in a custom module (e.g. mymodule):

* Implements hook_field_formatter_info().
function mymodule_field_formatter_info() {
  return array(
    'mymodule_formatter' => array( //Machine name of the formatter
      'label' => t('Links to images'),
      'field types' => array('image'), //This will only be available to text fields

* Implements hook_field_formatter_view().
function mymodule_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {
  $element = array(); // Initialize the var
  $settings = $display['settings']; // get the settings

  //get first image
  $firstimg = $items[0];
  $uri = file_create_url(file_load($firstimg['fid'])->uri);
  $html = '<img src="'. $uri. '" id="galeria1-button" class="btnSlideshow" href="#" />'. PHP_EOL;

  //get all images and put them as links but without being seen
  $options = array(
    'html' => TRUE, // This tells Drupal that we're sending HTML, not plain text, otherwise it would encode it
    'attributes' => array(
      'class' => 'galeria1',
  foreach ($items as $delta => $item) {
    $uri = file_create_url(file_load($item['fid'])->uri);
    $html.= l('&nbsp;', $uri, $options);

  //js will make that when you click on first image its as if you were clicking on first gallery image
  drupal_add_js('jQuery(document).ready(function(){jQuery("#galeria1-button").click(function(){jQuery(".galeria1").filter(":first").click();}); jQuery(".galeria1").colorbox({rel:\'galeria1\'});});', 'inline');

  $elements[0] = array('#markup' => $html);

  return $elements;
  • Obrigado! Thanks, pal! This is exactly what I was looking for. With some customization and image style options I will be able to tailor that to fit perfectly into my pages. I wish field_slideshow or colorbox could adopt this code. Feb 12, 2012 at 13:16

Since I haven't used Colorbox much, I will give a general answer, which is how I would start out trying to build this.

First, I would create a View, which filters on the multi-value image fields delta value. This would give me an easy overview of all galleries with their first image as a thumbnail.

Second, create another View that lists all images from the same field, taking a node-id as a contextual argument. This will produce a list of all images in any particular node.

Now the trick is to tie this together in a nice looking way. The primary problem, is to make the second View available in a way that colorbox can display. There is a very interesting Views integration patch in the issue queue that seems like it could be very useful for placing the second View inside a colorbox.

Some additional styling will be required to only show the right images in the colorbox. Semantic Views can help with adding useful CSS-classes on the images that can help hiding/showing the correct images.


One option would be by using the following code in your template.php file and modifying it where necessary:

function mytheme_preprocess_node(&$variables) {
  $variables['gallery'] = '';
  if (isset($variables['node']->field_images[$variables['node']->language][0])) {
    foreach ($variables['node']->field_images[$variables['node']->language] as $key => $val) {
      $full_img_url = file_create_url($val['uri']);
      if ($key == 0) {
        $thumbnail_url = image_style_url('thumbnail', $val['uri']);
        $variables['gallery'] .= '<a class="colorbox-load" rel="gallery" href="'. $full_img_url .'"><img src="'. $thumbnail_url .'" alt="Gallery image" /></a>';
      else {
        $variables['gallery'] .= '<a class="colorbox-load" rel="gallery" href="'. $full_img_url .'"></a>';

Then you could print the gallery in your node.tpl.php file with <?php print $gallery; ?>. This specific example should work when Colorbox module's colorbox load option is enabled, image field and theme names are set right and a image style named thumbnail exists.


I have a simple solution for colorbox:

I set up two image-fields in the content type, one for the thumbnail and one multi-value image-field for the slideshow.

In display-settings both fields are set to colorbox and "galery per page".

Via CSS the field for the slideshow is set to "display:none".

Thats it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.