Not working with multiple image field

Hmm your trick worked but still no go in my case. I sort of need a gallery / carousel thing. I display one large image above the carousel, then when you click on the thumb in the carousel it needs to change out the large image. By using a combination of views_slideshow and views_slideshow_carousel you can setup this functionality.

This currently works out of the box when you are using attached nodes for the images but not when using multiple image field. Or perhaps I am wrong?

In the end I am bound by time and need this done quickly so I just custom coded it. But it would be great if it could work out of the box.

Setting status to feature request.

Hi

Gosh it's been so long and I can't really remember the details anymore.

As mentioned above I ended up custom coding a small module and yes I happy to share it.

For anyone reading this post the code below has nothing todo with this module.

/**
 * Implements hook_block_info()
 */
function machinesrus_block_info(){
  $blocks['machine_carousel'] = array(
    'info' => t('Machine Carousel Block'),
    );
  return $blocks;
}

/**
 * Implements hook_block_view();
 */ 
function machinesrus_block_view($delta = ''){
  $block = array();
  switch($delta){
    case 'machine_carousel':
      $block['subject'] = t('Machine Carousel');
      $block['content'] = machinesrus_machine_carousel();
      break;
  }
  return $block;
}

/**
 * Machinesrus block callback function
 * @return string Markup for the carousel
 */
function machinesrus_machine_carousel(){
  // Load the node if nid is set
  $nid = arg(1) ? arg(1) : null;
  $node = $nid ? node_load($nid) : null;
  
  $output = null;
  if(isset($node) && isset($node->field_image['und']) && $node->type == 'machine'){
    // Load javascript
    $path = drupal_get_path('module', 'machinesrus');
    drupal_add_js($path . '/js/machinesrus.js');

    // Load carousel images
    $carousel_medium_images = machinesrus_machine_images($node->field_image['und'], 'machine_carousel_medium', false);
    $carousel_thumbnail_images = machinesrus_machine_images($node->field_image['und'], 'machine_carousel_thumbnails');
    
    // Load images into lists
    $carousel_medium_items = theme('item_list', array('items' => $carousel_medium_images) );

    $carousel_thumbnial_items = null;
    if(count($carousel_thumbnail_images) > 1){
      $carousel_thumbnial_items = theme(
        'jcarousel', 
        array(
          'items' => $carousel_thumbnail_images, 
          'options' => array(), 
          ) 
        );
    }

    $output .= '<div id="machine-carousel-wrapper">';
      $output .= '<div id="machine-carousel-image-medium">' . $carousel_medium_items . '</div>';
      $output .= '<div id="machine-carousel-images-thumbnail">' . $carousel_thumbnial_items . '</div>';
    $output .= '</div>';

  }

  return $output;
}

/**
 * Callback function to generate image markup
 * @param  array  $images An array containing all the images and their properties
 * @param  string  $style  The image style to use
 * @param  boolean $link   Whether the image should be placed in a anchor tag or not
 */
function machinesrus_machine_images($images, $style, $link = true){
  $output = array();
  foreach($images as $image){
    
    // Image theme function
    $item_image = theme(
      'image_style', 
      array(
        'style_name' => $style, 
        'path' => $image['uri'],
        ) 
      );
    
    // Set the link options
    $link_options = array('html' => true);

    $image_url = image_style_url($style, $image['uri']);
    $output[] = $link ? l($item_image, $image_url, $link_options) : $item_image;
  }

  return $output;
}

Here is the JS

(function ($) {
	Drupal.behaviors.carousel = {
		attach: function(context){
			$('#machine-carousel-image-medium div li').hide();
			$('#machine-carousel-image-medium div li').eq(0).show();

			$('#machine-carousel-images-thumbnail li a').click(function(){
				var index = $(this).parent().index();
				$('#machine-carousel-image-medium div li').hide();
				$('#machine-carousel-image-medium div li').eq(index).fadeIn();
				return false;
			})
		}
	}
})(jQuery);