Adding an additional pager option

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 });