开发者

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

开发者 https://www.devze.com 2022-12-21 20:58 出处:网络
Seems I\'ve outdone myself. All the while I was creating this pretty little \'latest news\' widget that fades on mouseover of each anch开发者_StackOverflow中文版or. Then my colleague says, \"Hey, Chri

Seems I've outdone myself. All the while I was creating this pretty little 'latest news' widget that fades on mouseover of each anch开发者_StackOverflow中文版or. 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';
    }

Any help would be hugely appriciated. Thanks everyone!

Christian


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


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

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


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)

0

精彩评论

暂无评论...
验证码 换一张
取 消