Lightbox/colorbox slideshow and trigger thumbnails

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.