Add support for the jQuery Cycle Pagers

Awesome! However, I have my rotator showing up in a tightly constrained block (http://capal.capellic.com) and it would be nice if the pager would show up like the arrows do -- on top of the content and then we can adjust the placement with CSS. Very nice, thanks!

hi,

i apply patch but pager do not display

by advance

thankyou

Subscribing

Over a year later and I'm getting back to this issue. Jacine, thanks for the patch! Works great! Easy to theme!

This is a great feature. I've made a version of Jacine's patch that applies cleanly to the 1.0-alpha2, for anyone sticking to the recommended releases.

I'm using this, it's working great.

Hi- This patch (#6) works as advertised, but now my views_rotator is not honoring the timeout settings. Has anyone else seen this? I mean the "Time between displaying items" and "Time for the transition" Views Rotator settings in the View.

Yes, not only were the 'timeout' and 'pause' settings not being recognized (they were assuming jCycle defaults), the "Paper Options" were also not having being honored. I got to the bottom of it after several hours of debugging. Here's what I found:

The changes in the patch file were NOT applied for views-rotator.js. Maybe I wasn't patching to the correct version, but when I looked at the jquery_cycle_page.patch file, I did not see that a new block of code is being added just after the end of the code block having to do with the previous and next buttons and before the auto height code block. What is not in the patch is removing the existing pager code block in favor of the new pager code block.

I substituted the new code block manually, but there errors in that code that cause the pager navigation not to appear. The good news is that the timeout and speed jcycle parameters work.

- The 'id' variable is not properly concatenated onto the string to build the ID element.
- There is a semi-colon on the end of the "if" statement.
- this.page is always '1' and never is 'none', 'top' or 'bottom'.

After fixing the syntax issues, it should be:

// Add jQuery Cycle Pager Functionality
if (this.pager != 'none') {
    switch(this.pager) {
        // Use pager, place it above 
        case 'top':
            $('#' + id)
            .before('<div id="nav-' + id + '" class="views-rotator-nav views-rotator-nav-top"></div>')
            .cycle({ pager: '#nav-' + id });
        break;
        // Use pager, place it below 
        case 'bottom':
            $('#' + id)
            .after('<div id="nav-' + id + '" class="views-rotator-nav views-rotator-nav-bottom"></div>')
            .cycle({ pager: '#nav-' + id });
        break;
    }
}

But we still have a problem with the this.pager variable -- it is always 1. The problem is due to the fact that the code in views_rotator.module is wrong when setting the 'pager' option. It's setting it on line 39 and then being overwritten with '1' on line 48 so that the whole template_preprocess_views_view_rotator() function now looks like this:

function template_preprocess_views_view_rotator(&$vars) {
  drupal_add_css(drupal_get_path('module', 'views_rotator') .'/views-rotator.css');

  $view = $vars['view'];
  $options = $view->style_plugin->options;

  $vars['views_rotator_id'] = 'views-rotator-'. $view->name .'-'. $view->current_display;

  drupal_add_js(drupal_get_path('module', 'views_rotator') .'/views-rotator.js');

  $view_settings['fx'] = 'fade';
  $view_settings['timeout'] = check_plain($options['timeout']) * 1000;
  $view_settings['speed'] = check_plain($options['speed']) * 1000;
  $view_settings['pause'] = check_plain($options['pause']);
  $view_settings['cleartype'] = 1;

  if ($options['navigation'] != 'none') {
        switch ($options['navigation']) {
            case 'back_next_buttons':
                $view_settings['next'] = '#'. $vars['views_rotator_id'] .'-views-rotator-next';
                $view_settings['prev'] = '#'. $vars['views_rotator_id'] .'-views-rotator-prev';
                break;
            case 'pager':
                $view_settings['pager'] = check_plain($options['pager']);
                break;
        }
  }

  if (empty($options['height'])) {
    $view_settings['height'] = 'auto';
    $view_settings['auto_height'] = 1;
  }
  
  drupal_add_js(array('views_rotator' => array($vars['views_rotator_id'] => $view_settings)), 'setting');
}

After applying the code, I get the page navigation, but then the timeout and speed settings no longer get applied.

The problem is that we're re-declaring the "cycle" settings and clobbering the attributes for timeout, speed, cleartype and pause. Those need to be set again along with the 'pager' attribute so that by the end of it, the entire code block looks like:

// Add jQuery Cycle Pager Functionality
if (this.pager != 'none') {
    switch(this.pager) {
        // Use pager, place it above 
        case 'top':
            $('#' + id)
            .before('<div id="nav-' + id + '" class="views-rotator-nav views-rotator-nav-top"></div>')
            .cycle({ 
                pager: '#nav-'+id,
                timeout: this.timeout,
                speed: this.speed,
                pause: this.pause,
                cleartype: this.cleartype        
            });
        break;
        // Use pager, place it below 
        case 'bottom':
            $('#' + id)
            .after('<div id="nav-' + id + '" class="views-rotator-nav views-rotator-nav-bottom"></div>')
            .cycle({ 
                pager: '#nav-'+id,
                timeout: this.timeout,
                speed: this.speed,
                pause: this.pause,
                cleartype: this.cleartype        
            });
        break;
    }
};

Great analysis. I also want to add the observation that it seems the newly added pagers are not being set "active" appropriately. Only the first one stays "active" regardless of clicked or timeout to another slide.

[EDIT: "activeSlide" active state in the pager functionality was not broken by this patch. It works fine with this patch.]

For those who have problem with setting time for view rotator ater applied the pager patch, you can check out this patch.

Thanks to Alex of Acquia. He is doing an awesome job.

Truyenle

It worked fine for me until I´ve installed the jQuery_update module which replace the core jQuery library in Drupal 6 with the version 1.3.2. Since then, the cycle pagers don´t show up and the rotator remains freezed. Other options in Views Rotator are working fine.