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.
Tags: views slideshowdrupaldrupal planet