CODEWITHSUNDEEP
javascriptjqueryjquery-cycle
Omar Juvera
Omar Juvera

Reputation: 12287

jQuery-Cycle: how to change the transition effect on each new image

That's pretty much what I am trying to accomplish. To have each image appear with a different transition effect.

Can you please help me fix and figure out what's wrong with my code?

jQuery:

var url = 'http://www.mywebsite.com/';
var img_dir = '_img/slideshow/';
var fx =
    [
    'blindX', 
    'blindY', 
    'blindZ', 
    'cover', 
    'curtainX', 
    'curtainY', 
    'fade', 
    'fadeZoom', 
    'growX', 
    'growY', 
    'scrollUp', 
    'scrollDown', 
    'scrollLeft', 
    'scrollRight', 
    'scrollHorz', 
    'scrollVert', 
    'shuffle', 
    'slideX', 
    'slideY', 
    'toss', 
    'turnUp', 
    'turnDown', 
    'turnLeft', 
    'turnRight', 
    'uncover', 
    'wipe', 
    'zoom'
    ];
var index = 0;

$(function() {
    var $slideshow = $('#slideshow'); 
    // add slides to slideshow (images 2-3) 
    for (var i = 2; i < 13; i++) 
        $slideshow.append(
            '<a href="' + url + img_dir + i+'.jpg" title="Slideshow">'+
                //src="http://www.mywebsite.com/_img/slideshow/"
            '<img src="' + url + img_dir + i+'.jpg" width="100" height="100" />'+
            '</a>'); 
    // start the slideshow 
    $slideshow.cycle(
    {
        if( index < fx.length ) { index++; }
        else { index = 0; }
        fx:      fx[index],
        timeout: 3000
    });
});

Upvotes: 1

Views: 1765

Answers (1)

lucuma
lucuma

Reputation: 18339

To use all the effects it is quite easy:

http://jsfiddle.net/lucuma/tcRCj/14/

$('#slideshow').cycle({fx:'all'});​

Furthermore if you just want to specify certain ones:

$('#slideshow').cycle({fx:'scrollDown,scrollLeft,fade'});

And if you do NOT want to randomize the effect order (it will randomize by default):

$('#slideshow').cycle({fx:'scrollDown,scrollLeft,fade', randomizeEffects:0});

Upvotes: 4

Related Questions