Last updated November 29, 2013. Created on September 6, 2010.
Edited by j3ll3nl, chrisjlee, redndahead. Log in to edit this page.

Apply The Pager Settings Hook

hook_views_slideshow_widget_pager_settings($view)

$view = The view object as returned by views

Usage Example

<?php
function views_slideshow_views_slideshow_widget_pager_settings($view) {
 
$settings = array();
 
// Settings for fields pager.
  // First verfiy that the view is using fields.
 
if ($view->row_plugin->uses_fields()) {
   
$settings = array(
     
'views_slideshow_pager_fields' => t('Fields'),
    );
  }
 
  return
$settings;
}
?>

Add any form options needed

hook_views_slideshow_widget_pager_form_options(&$form, &$form_state, &$view, $defaults, $dependency)

$form = the form element for the pager widget.
$form_state = form_state for the pager widget.
$view = The view object as returned by views.
$defaults = default values for the form elements.
$dependency = The name of the field these elements need to depend on. (In drupal 7 this is the field name so it can be used with form_states. In drupal 6 this is a portion of the id so it can be used with ctools dependent.js)

Usage Example

Drupal 6

<?php
function views_slideshow_pager_fields_views_slideshow_widget_pager_form_options(&$form, &$form_state, &$view, $defaults, $dependency) {
 
// Settings for fields pager.
 
$options = array();
 
// Get each field and it's name.
 
foreach ($view->display->handler->get_handlers('field') as $field => $handler) {
   
$options[$field] = $handler->ui_name();
  }
 
 
// Add ability to choose which fields to show in the pager.
 
$form['views_slideshow_pager_fields_fields'] = array(
   
'#type' => 'checkboxes',
   
'#title' => t('Pager fields'),
   
'#options' => $options,
   
'#default_value' => $defaults['views_slideshow_pager_fields_fields'],
   
'#description' => t("Choose the fields that will appear in the pager."),
   
'#prefix' => '<div id="' . $dependency . '-views-slideshow-pager-fields-fields-wrapper">',
   
'#suffix' => '</div>',
   
'#process' => array(
     
'expand_checkboxes',
     
'views_process_dependency',
    ),
   
'#dependency_count' => 2,
   
'#dependency' => array(
     
$dependency . '-enable' => array(1),
     
$dependency . '-type' => array('views_slideshow_pager_fields'),
    )
  );
 
 
// Add field to see if they would like to activate slide and pause on pager
  // hover
 
$form['views_slideshow_pager_fields_hover'] = array(
   
'#type' => 'checkbox',
   
'#title' => t('Activate Slide and Pause on Pager Hover'),
   
'#default_value' => $defaults['views_slideshow_pager_fields_hover'],
   
'#description' => t('Should the slide be activated and paused when hovering over a pager item.'),
   
'#prefix' => '<div id="' . $dependency . '-views-slideshow-pager-fields-hover-wrapper">',
   
'#suffix' => '</div>',
   
'#process' => array(
     
'views_process_dependency',
    ),
   
'#dependency_count' => 2,
   
'#dependency' => array(
     
$dependency . '-enable' => array(1),
     
$dependency . '-type' => array('views_slideshow_pager_fields'),
    ),
  );
}
?>

Drupal 7

<?php
function views_slideshow_pager_fields_views_slideshow_widget_pager_form_options(&$form, &$form_state, &$view, $defaults, $dependency) {
 
// Settings for fields pager.
 
$options = array();
 
// Get each field and it's name.
 
foreach ($view->display->handler->get_handlers('field') as $field => $handler) {
   
$options[$field] = $handler->ui_name();
  }
 
 
// Add ability to choose which fields to show in the pager.
 
$form['views_slideshow_pager_fields_fields'] = array(
   
'#type' => 'checkboxes',
   
'#title' => t('Pager fields'),
   
'#options' => $options,
   
'#default_value' => $defaults['views_slideshow_pager_fields_fields'],
   
'#description' => t("Choose the fields that will appear in the pager."),
   
'#process' => array(
     
'form_process_checkboxes',
    ),
   
'#states' => array(
     
'visible' => array(
       
':input[name="' . $dependency . '[enable]"]' => array('checked' => TRUE),
       
':input[name="' . $dependency . '[type]"]' => array('value' => 'views_slideshow_pager_fields'),
      ),
    ),
  );
 
 
// Add field to see if they would like to activate slide and pause on pager
  // hover
 
$form['views_slideshow_pager_fields_hover'] = array(
   
'#type' => 'checkbox',
   
'#title' => t('Activate Slide and Pause on Pager Hover'),
   
'#default_value' => $defaults['views_slideshow_pager_fields_hover'],
   
'#description' => t('Should the slide be activated and paused when hovering over a pager item.'),
   
'#states' => array(
     
'visible' => array(
       
':input[name="' . $dependency . '[enable]"]' => array('checked' => TRUE),
       
':input[name="' . $dependency . '[type]"]' => array('value' => 'views_slideshow_pager_fields'),
      ),
    ),
  );
}
?>

Implement your pager theme hook

The pager widget will call theme('your_pager_name_render') when it goes to render the pager. You will need to add a hook_theme implementation for that theme call.

Example in hook_theme

Drupal 6

<?php
 
'views_slideshow_pager_fields_render' => array(
     
'arguments' => array('vss_id' => NULL, 'view' => NULL, 'settings' => array(), 'location' => NULL, 'attributes' => array()),
     
'template' => 'theme/views-slideshow-pager-field',
     
'file' => 'theme/views_slideshow.theme.inc',
    ),
?>

Drupal 7

<?php
 
'views_slideshow_pager_fields_render' => array(
     
'variables' => array('vss_id' => NULL, 'view' => NULL, 'settings' => array(), 'location' => NULL, 'attributes' => array()),
     
'template' => 'theme/views-slideshow-pager-field',
     
'file' => 'theme/views_slideshow.theme.inc',
    ),
?>

Variables Passed

$vss_id = The unique id of the slideshow.
$view = The view object as returned by views.
$settings = Settings returned from the settings form.
$location = Location of the widget (top/bottom)
$attributes = Classes and ID's to use passed from main pager widget

Usage Example

Drupal 6

<?php
function template_preprocess_views_slideshow_pager_fields_render(&$vars) {
 
// Build our javascript settings.
 
$js_vars = array(
   
'viewsSlideshowPagerFields' => array(
     
$vars['vss_id'] => array(
       
$vars['location'] => array(
         
'activatePauseOnHover' => $vars['settings']['views_slideshow_pager_fields_hover'],
        ),
      ),
    ),
  );
 
 
// Add the settings to the page.
 
drupal_add_js($js_vars, 'setting');
 
 
// Add our class to the wrapper.
 
$vars['attributes']['class'] = (isset($vars['attributes']['class'])) ? $vars['attributes']['class'] . ' views_slideshow_pager_field' : 'views_slideshow_pager_field';
 
 
// Render all the fields.
 
$vars['rendered_field_items'] = '';
  foreach (
$vars['view']->result as $count => $node) {
   
$rendered_fields = '';
    foreach (
$vars['settings']['views_slideshow_pager_fields_fields'] as $field => $use) {
      if (
$use !== 0 && is_object($vars['view']->field[$field])) {
       
$rendered_fields .= theme('views_slideshow_pager_field_field', $vars['view'], $field, $count);
      }
    }
   
$vars['rendered_field_items'] .= theme('views_slideshow_pager_field_item', $vars['vss_id'], $rendered_fields, $count);
  }
}
?>

Drupal 7

<?php
function template_preprocess_views_slideshow_pager_fields_render(&$vars) {
 
// Build our javascript settings.
 
$js_vars = array(
   
'viewsSlideshowPagerFields' => array(
     
$vars['vss_id'] => array(
       
$vars['location'] => array(
         
'activatePauseOnHover' => $vars['settings']['views_slideshow_pager_fields_hover'],
        ),
      ),
    ),
  );
 
 
// Add the settings to the page.
 
drupal_add_js($js_vars, 'setting');
 
 
$vars['classes_array'][] = $vars['attributes']['class'];
 
$vars['widget_id'] = $vars['attributes']['id'];
 
// Add our class to the wrapper.
 
$vars['classes_array'][] = 'views_slideshow_pager_field';
 
 
// Render all the fields.
 
$vars['rendered_field_items'] = '';
  foreach (
$vars['view']->result as $count => $node) {
   
$rendered_fields = '';
    foreach (
$vars['settings']['views_slideshow_pager_fields_fields'] as $field => $use) {
      if (
$use !== 0 && is_object($vars['view']->field[$field])) {
       
$rendered_fields .= theme('views_slideshow_pager_field_field', array('view' => $vars['view'], 'field' => $field, 'count' => $count));
      }
    }
   
$vars['rendered_field_items'] .= theme('views_slideshow_pager_field_item', array('vss_id' => $vars['vss_id'], 'item' => $rendered_fields, 'count' => $count));
  }
}
?>

Register your module to use slideshow actions in javascript

There are currently 7 available actions for a widget/slideshow to work with.

  • play: play the slideshow.
  • pause: pause the slideshow.
  • nextSlide: move to the next slide.
  • previousSlide: move to the previous slide.
  • goToSlide: go to a specific slide number.
  • transitionBegin: the transition is beginning.
  • transitionEnd: the transition is ending.

The pager will usually interact with one or more of these actions.

function hook_views_slideshow_js_method_register()

return an array of pager id's that will use the javascript actions.

Usage Example

function views_slideshow_views_slideshow_js_method_register() {
  return array(
    'viewsSlideshowPagerFields',
    'viewsSlideshowControlsText',
    'viewsSlideshowSlideCounter',
  );
}

Implement the javascript hooks to perform actions

Drupal.[methodID] = Drupal.[methodID] || {};

Drupal.[methodID].[actionType] = function (options) {

}

Available options are:

options.action = action called
options.excludeMethods = Methods excluded from being called.
options.slideshowID = The unique id of the slideshow
options.slideNum = Used only on some actions, but it is the slide number for that action.

Usage Example

  Drupal.viewsSlideshowPagerFields = Drupal.viewsSlideshowPagerFields || {};
 
  /**
   * Implement hook_viewsSlidshowTransitionBegin for pager fields pager.
   */
  Drupal.viewsSlideshowPagerFields.transitionBegin = function (options) {
    // Remove active class from pagers
    $('[id^="views_slideshow_pager_field_item_' + options.slideshowID + '"]').removeClass('active');
   
    // Add active class to active pager.
    $('#views_slideshow_pager_field_item_' + options.slideshowID + '_' + options.slideNum).addClass('active');
  }

Calling an action

Drupal.[methodID].[type](options)

options is an object with these properties:
options.action = action to call (required)
options.slideshowID = The unique id of the slideshow (required)
options.excludeMethods = Methods excluded from being called.
options.slideNum = Used only on some actions, but it is the slide number for that action.

Usage Example

Drupal.viewsSlideshow.action({ "action": 'goToSlide', "slideshowID": uniqueID, "slideNum": index });

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

g10’s picture

note that the hook hook_views_slideshow_js_method_register is replaced by hook_views_slideshow_widget_info()

eg. viewsSlideshowPagerFields method is defined as views_slideshow_pager_fields

<?php
function hook_views_slideshow_widget_info() {
  return array(
   
'views_slideshow_pager_fields' => array(
     
'name' => t('Pager Fields'),
     
'accepts' => array(
       
'transitionBegin' => array('required' => TRUE),
       
'goToSlide',
       
'previousSlide',
       
'nextSlide',
      ),
     
'calls' => array(
       
'goToSlide',
       
'pause',
       
'play',
      ),
    ),
  );
}
?>

check views_slideshow.api.php for more info