Hi,

I have a views rotator working on my site. I would like to add the functionality of Cycles Auto-Pager to the navigation between slides.

http://malsup.com/jquery/cycle/pager.html

I was thinking it might work if I added the following under jquery_plugin_add('cycle');

drupal_add_js(' $(document).ready(function() {
$("#views-rotator-home_slideshow-block_1").before("

Comments

halcyonandon’s picture

halcyonandon commented

before("").cycle cut out a div tag with reference to the nav id, but I didn't actually miss it in my code FYI

halcyonandon’s picture

halcyonandon commented
Assigned: Unassigned » halcyonandon
Status: Active » Fixed

By following the example at http://malsup.com/jquery/cycle/pager.html I was able to achieve the pagination functionality in my views rotator instance.

First off, any changes I made were done in the file "views-view-rotator.tpl.php" in the views_rotator module folder.

At the top of this file right under where I call the cycles plugin using " jquery_plugin_add('cycle');", I added the styles for the nav/pagination.

Below that I added this inline javascript... 

<script type="text/javascript">
$(function() {
$('#views-rotator-home_slideshow-block_1').before('<div id="nav">').cycle({  
    pager:  '#nav' 
});
});
</script>

"views-rotator-home_slideshow-block_1" will obviously be a name unique to your project. I also removed the <span></span> tags containing the prev/next controls placed there by default. The end result is a pagination effect on my views rotator that works just like the example at that link. Hope this helps someone.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

m.stenta’s picture

m.stenta
he/him
Primary language English
commented

Thanks to halcyonandon for the above code. It worked great for adding a pager.

I altered the code slightly to allow for multiple Views Rotator blocks on one page, by defining a unique pager ID. Add this to the top of views-view-rotator.tpl.php:

<script type="text/javascript">
$(function() {
$('#<?php print $views_rotator_id ?>').before('<div id="<?php print $views_rotator_id ?>_pager">').cycle({ 
    pager:  '#<?php print $views_rotator_id ?>_pager'
});
});
</script>
tsi’s picture

tsi commented

This thread is great news for me !
Do you think an image pager is also doable ?
How can I do this ?
Thanks !

benleivian’s picture

benleivian commented

Thanks for this!

seutje’s picture

seutje commented

someone on IRC was using this method and noticed that the settings were being ignored, which makes sense, since ur effectively re-calling the cycle plugin on it, but without the settings, making the Drupal.behaviors.views_rotator pretty useless

instead, try this approach:

(function($) {
  // store a reference to the original behavior
  var _oldrotator = Drupal.behaviors.views_rotator;

  // override the behavior
  Drupal.behaviors.views_rotator = function(context) {
    // iterate over all rotators defined in the settings
    $.each(Drupal.settings.views_rotator, function(id, el) {
      // add a pager div in front of it
      $('#'+id).before('<div id="'+id+'_pager"></div>');
      // add the pager id to the settings
      el.pager = '#'+id+'_pager';
    });
    // call the original behavior
    _oldrotator(arguments);
  }
})(jQuery);

it will allow u to still use the settings, as it will still run through the original behavior, it'll just run a few things beforehand

hope this helps :)

bryancasler’s picture

bryancasler commented

This patch #378842: Add support for the jQuery Cycle Pagers worked for me