Drupal - Theme "Previous", "Next", "Pause" and "Resume" Controls on a Views Slideshow

Here is how to use preprocess functions to theme the "Previous", "Next", "Pause" and "Resume" button controls text on a Views Slideshow. In this example, I wanted to change each of the buttons to text that mimics somethind you'd find on a media player.

• Previous: <<
• Next: >>
• Pause: | |
• Resume: >

I prefer to do most themeing with preprocess functions, that way our theme doesn't get too cluttered with *.tpl.php files. Unfortunately, with Views Slideshow 7.x-3.0 the theme and template preprocessors don't allow us to change the text of the slideshow's navigation buttons. Luckily, we can contribute to the open source goodness by posting an issue and a patch for this:

• http://drupal.org/node/1949118#comment-7203504

Once the patch is applied, we can do this in our theme's template.php file:

/**
 * Implements template_preprocess_views_slideshow_controls_text_previous().
 */
function MY_THEME_preprocess_views_slideshow_controls_text_previous(&$vars) {
  $vars['previous_text'] = '<<';
}

/**
 * Implements template_preprocess_views_slideshow_controls_text_pause().
 */
function MY_THEME_zen_preprocess_views_slideshow_controls_text_pause(&$vars) {
  $vars['start_text'] = '| |';
}

/**
 * Implements template_preprocess_views_slideshow_controls_text_next().
 */
function MY_THEME_preprocess_views_slideshow_controls_text_next(&$vars) {
  $vars['next_text'] = '>>';
}

Since the "Pause" and "Resume" feature is dynamic, we need a little bit of javascript to handle the text changing on these two buttons. In your custom module's javascript file, add this code:

// Theme the pause control.
Drupal.theme.prototype.viewsSlideshowControlsPlay = function () {
  return '| |';
};
// Theme the resume control.
Drupal.theme.prototype.viewsSlideshowControlsPause = function () {
  return ' > ';
};

There you go, enjoy! Be sure to flush your theme registry and js/css caches to make these changes available.

If you'd prefer a tpl.php file approach to themeing, check out the available template files inside the 'theme' directory in the View Slideshow module code.