style views_slideshow pager

Question

Is there a way to change views_slide show "image 1 of 3" to be 3 circles, where the active one is black and the rest are grey? I tried doing that in CSS but does not look like its the right approach for doing this.

Answer 1

@Scorchio Thanks for that. I was successfully able to convert the layout from '1 of xx' to '1 2 3 4 5 6 x' by overriding views-slideshow-slide-counter.tpl.php and modifying the views_slideshow.js. My changes are below.

views-slideshow-slide-counter.tpl.php

<div id="views_slideshow_slide_counter_<?php print $variables['vss_id']; ?>" class="<?php print $classes; ?>">
<?php 
    $slide_count = count($view->result); 
    for($i=1;$i<=$slide_count;++$i)
        print '<span class="num'.$i.'">'.$i.'</span> ';
 ?>
 </div>

views_slideshow.js

Drupal.viewsSlideshowSlideCounter.transitionBegin = function (options) {
  $('#views_slideshow_slide_counter_' + options.slideshowID + ' span').removeClass('active');
  $('#views_slideshow_slide_counter_' + options.slideshowID + ' .num' + (options.slideNum + 1)).addClass('active');
};

Answer 2

[I don't know which version you're using - I'm checking a version of Views Slideshow which is tagged 7.x-3.x right now in the project repo. It shold be similar for earlier versions.]

I'm sorry for not being able to give a complete recipe, but here are my tips anyway.

• The theme/views-slideshow-slide-counter.tpl.php file contains the text part for the text you've mentioned. Pay attention to the <span class="num">, because...

• ...the js/views_slideshow.js file contains the necessary jQuery bits for modifying that number (see around line 381):

  /**
   * Implement the transitionBegin for the slide counter.
   */
  Drupal.viewsSlideshowSlideCounter.transitionBegin = function (options) {
    $('#views_slideshow_slide_counter_' + options.slideshowID + ' .num').text(options.slideNum + 1);
  };
  

If you could hook into that jQuery or override it in some way, that would solve your problem. (I don't really know how to do that - my Drupal-related Javascript skills could get some polishing, but hopefully that's enough for a good start.)