lightbox – AgileAdam.com

This is a pretty simple example that illustrates the use of Lightbox2’s slideshow feature. In the example, we have an imagefield that allows an unlimited number of images. We only want to render an imagecache version of the first image that, when clicked, will provide a slideshow with the rest of the images in the field. In the example, our field is called “field_product_images”.

The two files I’m showing are both within the theme for the site.

There are a few other options for achieving the same end result, but this seemed easier to explain and execute. Depending on your needs, you may need to make this happen at a deeper level (module) or in a field template/function override. If you have another approach, please post a comment!

/**
 * Override or insert variables into the node templates.
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 * @param $hook
 *   The name of the template being rendered ("node" in this case.)
 */
function yourthemename_preprocess_node(&$vars, $hook) {
  if ($vars['node']->type == 'product') {
    // Loop through images for the product. Show the first image, and build the lightbox links to the other 
    // images (more efficient than rendering the entire image and hiding it)
    // The field is configured to be a lightbox slideshow via Display Settings on the content type.
    if ($vars['node']->field_product_images[0]) {
      $vars['image_html'] = '';
      foreach($vars['node']->field_product_images as $key => $item) {
        if ($key == 0) {
          $vars['image_html'] .= $item['view'];
        }
        else {
          $vars['image_html'] .= '<div class="for-lightbox" style="display:none;">';
          $vars['image_html'] .= "<a href='/{$item['filepath']}' rel='lightshow[field_product_images][{$item['data']['title']}]'>Img</a>";
          $vars['image_html'] .= '</div>';
        }
      }
    }
  }
}

/**

* Override or insert variables into the node templates.

* @param $vars

* An array of variables to pass to the theme template.

* @param $hook

* The name of the template being rendered ("node" in this case.)

function yourthemename_preprocess_node(&$vars, $hook) {

if ($vars['node']->type == 'product') {

// Loop through images for the product. Show the first image, and build the lightbox links to the other

// images (more efficient than rendering the entire image and hiding it)

// The field is configured to be a lightbox slideshow via Display Settings on the content type.

if ($vars['node']->field_product_images[0]) {

$vars['image_html'] = '';

foreach($vars['node']->field_product_images as $key => $item) {

if ($key == 0) {

$vars['image_html'] .= $item['view'];

}

else {

$vars['image_html'] .= '<div class="for-lightbox" style="display:none;">';

$vars['image_html'] .= "<a href='/{$item['filepath']}' rel='lightshow[field_product_images][{$item['data']['title']}]'>Img</a>";

$vars['image_html'] .= '</div>';

}

<?php if (isset($image_html)): ?>
  <div class="field product-thumb">
    <?php print $image_html; ?>
  </div>
<?php endif; ?>

<?php if (isset($image_html)): ?>

<?php print $image_html; ?>

</div>

<?php endif; ?>

Now, one last thing. If you want to render many of these imagelink slideshows on a single page, you’ll need to give each lightshow group a unique name. In this project I had a views block that rendered many of these products in “node” teaser view. So, I added three more lines to my template.php code to append the node ID onto the end of the group name. I added this code just under (outside of) the foreach loop above.

// Because we may be showing multiple slideshows on a page (the store view
// renders many products) let's add a unique identifier to the end of the group
$orig_group = 'lightshow[field_product_images]';
$new_group = "lightshow[field_product_images_{$vars['node']->nid}]";
$vars['image_html'] = str_replace($orig_group, $new_group, $vars['image_html']);

// Because we may be showing multiple slideshows on a page (the store view

// renders many products) let's add a unique identifier to the end of the group

$orig_group = 'lightshow[field_product_images]';

$new_group = "lightshow[field_product_images_{$vars['node']->nid}]";

$vars['image_html'] = str_replace($orig_group, $new_group, $vars['image_html']);