Wipe transition?

[zalgocykel]

Im trying to get this transition http://jquery.malsup.com/cycle/wipe.html "clip: 'l2r'" to work in cycle2. I copied the wipe transition from the plugin source and tried using it in cycle 2. It doesnt work, why?

This is the code: $('.mainimgs-slideshow').cycle({fx:'wipe}); // wipe - clip animation $.fn.cycle.transitions.wipe = function($cont, $slides, opts) { var w = $cont.css('overflow','hidden').width(); var h = $cont.height(); opts.cssBefore = opts.cssBefore || {}; var clip; if (opts.clip) { if (/l2r/.test(opts.clip)) clip = 'rect(0px 0px '+h+'px 0px)'; else if (/r2l/.test(opts.clip)) clip = 'rect(0px '+w+'px '+h+'px '+w+'px)'; else if (/t2b/.test(opts.clip)) clip = 'rect(0px '+w+'px 0px 0px)'; else if (/b2t/.test(opts.clip)) clip = 'rect('+h+'px '+w+'px '+h+'px 0px)'; else if (/zoom/.test(opts.clip)) { var top = parseInt(h/2,10); var left = parseInt(w/2,10); clip = 'rect('+top+'px '+left+'px '+top+'px '+left+'px)'; } }

opts.cssBefore.clip = opts.cssBefore.clip || clip || 'rect(0px 0px 0px 0px)';

var d = opts.cssBefore.clip.match(/(\d+)/g);
var t = parseInt(d[0],10), r = parseInt(d[1],10), b = parseInt(d[2],10), l = parseInt(d[3],10);

opts.before.push(function(curr, next, opts) {
    if (curr == next) return;
    var $curr = $(curr), $next = $(next);
    $.fn.cycle.commonReset(curr,next,opts,true,true,false);
    opts.cssAfter.display = 'block';

    var step = 1, count = parseInt((opts.speedIn / 13),10) - 1;
    (function f() {
        var tt = t ? t - parseInt(step * (t/count),10) : 0;
        var ll = l ? l - parseInt(step * (l/count),10) : 0;
        var bb = b < h ? b + parseInt(step * ((h-b)/count || 1),10) : h;
        var rr = r < w ? r + parseInt(step * ((w-r)/count || 1),10) : w;
        $next.css({ clip: 'rect('+tt+'px '+rr+'px '+bb+'px '+ll+'px)' });
        (step++ <= count) ? setTimeout(f, 13) : $curr.css('display', 'none');
    })();
});
$.extend(opts.cssBefore, { display: 'block', opacity: 1, top: 0, left: 0 });
opts.animIn    = { left: 0 };
opts.animOut   = { left: 0 };

};

[paulo72]

The options are different in cycle2, there is no opts.before and so it throws an error when it hits that line.

I'm currently working on the same thing. If i figure it out I'll let you know. Please do the same if you figure it out.

[davidfwall]

Likely that the OP has already found a way around this, but…

You can recreate the old Wipe Transition using the Tile Plugin. If you set the number of tiles to 1 it has the same effect as the Wipe transition would have achieved.

http://jquery.malsup.com/cycle2/demo/tile.php

Something like this should work:

data-cycle-fx="tileBlind"
data-cycle-tile-vertical=true
data-cycle-tile-count=1