JQUERY CYCLE - Can I add page links to anchors assigned to Cycle's pager?

Question

Hello everyone.

Seems I've outdone myself. All the while I was creating this pretty little 'latest news' widget that fades on mouseover of each anchor. Then my colleague says, "Hey, Chris, these links don't work"

...oops. I would like to find out if I can have these anchors take the user to the relvent page on click. Currently Cycle is set to do its hocus pocus on mouseover.

This is my Cycle code:

$('#newsSlider .slides ul').cycle({
    fx:     'fade',
    speed:  1000,
    timeout: 0,
    pager:  '.slides-nav',
    pagerEvent: 'mouseover',
    pagerAnchorBuilder: function(idx, slide) {
        // return sel string for existing anchor
        return '.slides-nav li:eq(' + (idx) + ') a';
    }

And here is the dev site:

http://slg-development.co.uk/Gradient_12859/

Any help would be hugely appriciated. Thanks everyone!

Christian

Answer 1

I will be releasing a new version today that fixes this problem, but in the meantime you can comment out these two lines in the plugin:

if (opts.pagerEvent != 'click')
    $a.click(function(){return false;});

Mike

Answer 2

v2.80 is now available and includes an option called 'allowPagerClickBubble'. Demo:

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

Answer 3

Awesome malsup - you just cured my hump day!

            $.getScript(Cycle, function() {
             try {
                 $('.imageHolder').cycle({ 
                        delay:  cDelay, 
                        speed:  cSpeed,
                        pager: '.swap-thumbnails',
                        pagerEvent: 'mouseover',
                        pauseOnPagerHover: 1,
                        //before: showImageDescription
                        pagerAnchorBuilder: function(idx, slide) {
                            // return sel string for existing anchor
                            return '.swap-thumbnails li:eq(' + (idx) + ') a';
                        },
                        allowPagerClickBubble: true,
                        //pagerClick: function() {alert ('hi')},
                });

             } catch (err) {
                 // Doh!
             }
             function showImageDescription() {
                 $('.image-description').hide();
                 var DescriptionClass = $(this).attr("className");
                 var showClass = '.frontpage-description .' + DescriptionClass;
                 //$(showClass).show();
                 $(showClass).fadeIn('slow');

             }
        });

The above worked nicely for me. I am having some issues in IE8, but I strongly suspect I have accidentally turned off javascript or something.

Update: I got this working nicely in IE8 - try moving allowPagerClickBubble before pagerAnchorBuilder (I have no idea why this worked, but it did)

Answer 4

can any please tell me how to enable you tube videos in IE 8

Thanks

Traffic School

Answer 5

Thanks malsup. Just what I needed. I've been tryi9ng to get my pagers to anchor for ages. (All my clients want it like the BBC website ;) Here's my code:

 $items.cycle({ 
   timeout: settings.time * 1000,
    speed: settings.speed,
    fx: settings.effect,
   randomizeEffects: settings.randomize,
   pause: settings.pause,
    cleartypeNoBg: true,
     pager: $('div.rotor-tabs', $rotor),
     pagerEvent: 'mouseover', 
     pauseOnPagerHover: true,
   allowPagerClickBubble: true, 
   pagerAnchorBuilder: function(idx, slide){
     return $('div.rotor-tabs .rotor-tab:eq(' + idx + ')', $rotor); 
    }
  }).css('visibility', 'visible');

Learn guitar online