2

I am using the jquery cycle plugin with a custom animation. It is working great!

However, I would like the slides to advance to the right or left depending upon the index#, i.e. if the user clicks on link 1 while slide #3 is the active slide the animation will transition out to the right, while if link 4 was clicked on the slide would transition to the left.

The functionality I'm looking for is the same as the scrollHorz/scrollVert transitions.

I understand that what I need is some logic to relate the current frame and the next frame: if (frameclicked on is a higher index than the current slide) {animate to the left} else {animate to the right}

I just don't know where to put it in the code. I hope that makes sense. Any help would be greatly appreciated! Thanks!

Not that it probably helps, but my custom code is below.

$('#s4').before('<div id="nav" class="nav">').cycle({
    fx:     'custom',

    cssBefore:{
            left:1000,
            opacity:0,
            display:'block'
        },
    animIn:{
            left:0,
            opacity:100
        },
    animOut:{
            left:-1000,
            opacity:0
        },
    cssAfter:{
            display:'none'
        },
    speed:  'slow',
    easeIn: 'easeInExpo',
    easeOut: 'easeInExpo',
    next: '.nextnav',
    prev: '.previous',
    timeout: 0,
    containerResize: 1,
    fit: 0,
    height: 600,
    pager: '#slideshow-nav',
    pagerAnchorBuilder: function(idx, slide) {
            return '#slideshow-nav li:eq(' + (idx) + ')';
        }

});
Eli
  • 14,779
  • 5
  • 59
  • 77
Jackrabbitrocks
  • 63
  • 1
  • 7

2 Answers2

4

You need to hook into to onPrevNextEvent. They have something called isnext wich gets passed wich basically tells you which direction you are going in.

Example I updated a fiddle I whipped up yesterday for cycle.

http://jsfiddle.net/gx3YE/12/

$(function() {

$('#megaWrapper').cycle({
    next : "#next",
    prev : "#prev",
    timeout : 0,
    onPrevNextEvent: function(is,i,el) {
        if (is === true) {
            alert('slide right');
        }
        else {
            alert('slide left'); 
        }
    }

});

});

wesbos
  • 25,839
  • 30
  • 106
  • 143
  • Thank you so much for your help! I really appreciate you taking the time to look at this. It is certainly a step in the right direction. I'm still in need of understanding how to access the animating function from within the conditional statement - or to use information from the conditional. So, would I replace the alert in your example above with the function to animate? Or could I pass a variable to aniIn/aniOut? I'm afraid I'm still unclear about how that would look. – Jackrabbitrocks Apr 19 '11 at 18:44
  • Also, would the onPrevNextEvent work for the auto-generated pager links or just for the p/n buttons? I really wish there was some kind of documentation on this plugin. I'm sorta surprised considering it has been out for so long. – Jackrabbitrocks Apr 19 '11 at 18:49
2

Isn't what you're describing part of Cycle's core functionality?

Here's how I do it:

$('.slideshow').cycle({
    fx: 'scrollHorz',
    timeout: 0,
    next:   '#next', 
    prev:   '#prev'     
});
Doron
  • 21
  • 1
  • hmm, I see what she's trying to do and I have the same question... I have no problem using scrollHorz... i do all the time.. the project I'm working on needs the current slide to slide off the screen (right or left) but also with a fade out effect on the that exiting slide... the "onPrevNextEvent" seems almost perfect.. the animOut, animIn works great too.. but I cannot set a right or left outro to any of them.. just one direction.... :( any ideas anyone? – Abbey Jul 23 '13 at 01:12