[javascript] Solving the overlap in JQuery Cycle

I'm using the great JQuery Cycle plugin on most of my projects whenever I need a slideshow.

One of the main benefits of it are the many options it has, allowing you to pretty much do whatever you want with it: from building simple slideshows, to 'coda'-effects and slideshows with custom navigation.

Last week I was using it with the 'scrollHorz' effect, but no matter where or how I applied a width or margin, I always ended up an overlap during the transition. If you look close at the demo site, you'll notice the overlap there as well. The border gets 'squeezed'.

I could not get this solved with css, nor with any of the parameters of the plugin, but I needed a margin nonetheless. Searching the internet didn't help me much either.

The problem lies within the plugin afaics. Let's look at the code for 'scrollHorz':

$.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) {

	$cont.css('overflow','hidden').width();

	opts.before.push(function(curr, next, opts, fwd) {

		$.fn.cycle.commonReset(curr,next,opts);

		opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);

		opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;

	});

	opts.cssFirst = { left: 0 };

	opts.cssBefore= { top: 0 };

	opts.animIn   = { left: 0 };

	opts.animOut  = { top: 0 };

};

You see that it positions the image/slide absolute and puts them either completely on the left or the right based on its width. This means, if you want a margin, you'll need to add it in the calculations there.

Luckily, in JQuery this is pretty easy, so you can just extend the plugin by adding this javascript:

$.fn.cycle.transitions.scrollCustom = function($cont, $slides, opts) 
    {
        $cont.css('overflow','hidden').width();
    
        opts.before.push(function(curr, next, opts, fwd) {
    
            $.fn.cycle.commonReset(curr,next,opts);
            
            opts.cssBefore.left = fwd ? next.cycleW + opts.margin : - (next.cycleW + opts.margin);
    
            opts.animOut.left = fwd ? -(curr.cycleW + opts.margin) : curr.cycleW + opts.margin;
    
        });
    
        opts.cssFirst = { left: 0 };
    
        opts.cssBefore= { top: 0 };
    
        opts.animIn   = { left: 0 };
    
        opts.animOut  = { top: 0 };

    };

You can then easily add in the margin by doing this:

$('#slideShow').cycle({
                    fx: "scrollCustom",
                    margin: 26                    
                }); 

You can of course optimize this even further with 'beforeMargin', 'outMargin' etc... but you get the idea. Hope this helps and saves you time looking for this. Also, let me know if you have a better solution.