Adding an additional widget

Slideshow widgets are control, or monitoring elements, tracking progress of a slideshow. They implement a number of javascript triggers making them able to respond to slide changes, or even initiate them. Such widget can be a slider for example.

Some of these examples originate from the slider (the yellow boxes) that can be seen on vps.net.

First you need to define the widget. This definition contains its machine name and the javascript triggers it will use:

/**
 * Implements hook_views_slideshow_widget_info().
 */
function views_slideshow_slider_views_slideshow_widget_info() {
  return array(
    'views_slideshow_slider' => array(
      'name' => t('Slider'),
      'accepts' => array(
        'transitionBegin' => array('required' => TRUE),
        'goToSlide',
        'previousSlide',
        'nextSlide',
      ),
      'calls' => array(
        'goToSlide',
        'pause',
        'play',
      ),
    ),
  );
}

you might want to define custom themes (skins) for your widget so its visual can be customized:

/**
 * Implementation of hook_views_slideshow_skins().
 */
function views_slideshow_slider_views_slideshow_skins() {
  return array(
    'default' => array(
      'title' => t('Default'),
    ),
  );
}

you will also have to define a widget_render theme function, which will automatically be called from views_slideshow, for example:

/**
 * Implements hook_theme().
 */
function views_slideshow_slider_theme($existing, $type, $theme, $path) {
  return array(
    'views_slideshow_slider_widget_render' => array(
      'variables' => array('vss_id' => NULL, 'view' => NULL, 'settings' => array(), 'location' => NULL, 'rows' => array()),
      'file' => 'theme/views_slideshow_slider.theme.inc',
    ),
  );
}

(note the original module implements one more theme function, but that is called independently from views_slideshow).

If you want to have custom settings for your widgets you can define a form that will show up in views:

/**
 * Implements [widget]_views_slideshow_widget_form_options().
 *
 * Add a configuration to set the number of grey boxes that will show on the output.
 */
function vpsnet_slider_views_slideshow_widget_form_options(&$form, &$form_state, &$view, $defaults, $dependency) {
  $form['grey_nodes'] = array(
    '#type' => 'textfield',
    '#title' => t('Grey box count'),
    '#description' => t('Enter the number of greyed boxes'),
    '#default_value' => $defaults['grey_nodes'],
    '#states' => array(
      'visible' => array(
        ':input[name="' . $dependency . '[enable]"]' => array('checked' => TRUE),
      ),
    ),
  );
}

JavaScript

In the widget definition we can define which javascript hooks are implemented in the widget, for example for slider transitionBegin was implemented:

/**
 * Implement viewsSlideshowSlider for the slider.
 */
Drupal.viewsSlideshowSlider.transitionBegin = function (options) {
  var slider = $('#views_slideshow_slider_slider_' + options.slideshowID);
  // Move the slider to the next stop. Because slider counts from 0 we don't need a slideNum + 1.
  slider.slider('value', options.slideNum);
}