Download & Extend

Add support for the jQuery Cycle Pagers

Project:Views Rotator
Version:6.x-1.0-alpha2
Component:Code
Category:feature request
Priority:normal
Assigned:Unassigned
Status:needs work

Issue Summary

Hi there,

Thanks so much for this module!

I'm using it on a client's site, and needed to add support for the pagers, so I did. I'm not sure if you would like to add support for the pagers to the module or not, but since I wrote it in on my end, here's the patch ;)

Thanks!

AttachmentSize
jquery_cycle_pager.patch2.42 KB

Comments

#1

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!

#2

You're right... I did this a bit too fast. I've made it so you choose either the prev/next buttons or the pager, because you probably should use both at the same time and added some CSS. Hopefully this patch is better ;)

AttachmentSize
jq_cycle.patch 3.61 KB

#3

hi,

i apply patch but pager do not display

by advance

thankyou

#4

Subscribing

#5

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

#6

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.

AttachmentSize
jquery_cycle_pager.patch 4.33 KB

#7

Status:needs review» reviewed & tested by the community

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

#8

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.

#9

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:

<?php
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;
    }
};

#10

Status:reviewed & tested by the community» needs work

#11

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.]

#12

Version:6.x-1.x-dev» 6.x-1.0-alpha2

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

AttachmentSize
views-rotator-fixed-time-setting.patch 780 bytes

#13

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.

nobody click here