Writing widget for Views Slideshow

There is more or less standard way of building Slideshows in drupal -- Views Slideshow module.

Module really works great and I would like to thank all people involved in it.

But what we should do when we want to change some of the behaviors of the javascripts of it? In my case the task was to change image style (imagecache preset) of the active page thumbnail. By default image style all thumbnails where grayscale, but we needed to make active thumbnail colorful. Like on screenshot image below.

After digging into the code of the views slideshow I have found that it is extensible via widgets. So here I would like to share experience writing own widget for this module.

First in our custom module we should implement hook_views_slideshow_widget_info().

/**
 * Implements hook_views_slideshow_widget_info().
 *
 * Adds widget for views_slideshow view on frontpage.
 */
function custom_views_slideshow_widget_info() {
  $widget = array();
 
  $widget['custom_change_thumbnail'] = array(
    'name' => 'Change image style of thumbnail',
    'accepts' => array(
      'transitionBegin' => array('required' => TRUE),
    ),
    'calls' => array(),
  );
 
  return $widget;
}

Method transitionBegin is triggered when slide is changed no difference whether it is changed automatically or user clicks on another pager thumbnail. The idea is that we also change src attribute of the new active thumbnail. In this way we change the image style. Our grayscale image style is slideshow_thumbnail. Our colored thumbnail style is slideshow_thumbnail_color.

We need to add javascript to the page where our slideshow is shown.

(function($) {
 
Drupal.customChangeThumbnail = Drupal.customChangeThumbnail || {};
 
/**
 * Custom widget customChangeThumbnail reaction on transitionBegin.
 *
 * Change the src of the thumbnail images to make them color on active.
 */
Drupal.customChangeThumbnail.transitionBegin = function (options) {
  // Remove color image style from all pager image items.
  $('[id^="views_slideshow_pager_field_item_frontpage_slideshow-block"] img').each(function(){
    var src = $(this).attr('src');
    var nocolor_src = src.replace('/styles/slideshow_thumbnail_color/', '/styles/slideshow_thumbnail/');
    $(this).attr('src', nocolor_src);
  });
 
  // Change image style to color version for the next active item.
  var image = $('#views_slideshow_pager_field_item_' + options.slideshowID + '_' + options.slideNum + ' img');
  var src = $(image).attr('src');
  var color_src = src.replace('/styles/slideshow_thumbnail/', '/styles/slideshow_thumbnail_color/');
  $(image).attr('src', color_src);
}
 
})(jQuery);

Please pay attention to the name of the key of defined widget "custom_change_thumbnail" and js method "customChangeThumbnail".

I am sure in similar way we can add much more effects to our slideshow when needed.

Hope you found this useful and thank you for reading.

Comments

Hi, when I click the thumbnails, nothing changes. Hope this helps

Oh, that is just simple screenshot of the slideshow to illustrate what we want to make

Thanks for the great tutorial. It's these kinds of things I envisioned when I was working out the api.

Thank you very much. I don't need this functionality right now, but I'm looking for ways of JS extensions organisation for my Drupal module. So what will happen if we don't declare Drupal.customChangeThumbnail?

As far as I remember, there is check in javascript whether such function exists. So if you don't declare it, nothing will be broken.

If us use image cache presets from only one image - as in your case, the method is ok, but if not ... than I think its hard to remember that the thumbnails needs to have the same name. For a current project with drupal 7 (not jet online) I just show images of both thumbnail types and use css to hide the thumbnails I don't need. That way I am not just able to highlight the active thumbnail, I am also able to highlight a thumbnail on mousover (:hover), without the use of additional js. -- Drupal Freelancer http://lars-schroeter.com

What should be done if I don't want the thumbnails below the slider? I just want the slider to be like this: http://demo.drupalizing.com/bluemasters/ (without the dots below and text. just plain image :) )

I believe simplest solution will be just hide thumbnails with CSS if you can't find this option in views settings.