jQuery Cycle and Fullscreen

jQuery Cycle is an excellent plugin and the most extensible jquery plugin I’ve seen thus far. It works surprisingly well and is very accommodating to all sorts of external html/css setups.

However there is an itch to scratch when it comes to fullscreen sliding. The Cycle plugin doesn’t quite support this well enough. Fortunately the Transition Effects architecture allows us to write custom transitions to overcome this problem.

/* Ca-Phun Ung < caphun at tofugear dot com>
 * Support for fullscreen horizontal scroll transitions.
 */
$.fn.cycle.transitions.scrollMaxHoriz = function($cont, $slides, opts) {
    var w = $(window).width();
    if (opts.minWidth && w < opts.minWidth) w = opts.minWidth;
	opts.before.push(function(curr, next, opts, fwd) {
		if (opts.rev)
			fwd = !fwd;
        curr.cycleW = next.cycleW = w;
		$.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;
};

As you may notice in the above transition I’m only dealing with screen width hence I call this the scrollMaxHoriz transition. Now how to use this code? First load it as part of your javascript library stack then in your cycle call you can:

$('.my-slides').cycle({
  fx: 'scrollMaxHoriz', // use custom scrollMax transition plugin
  minWidth: 1057 // optional
});

That’s it!

8 Comments

  1. Caphun, any demonstration?

    • caphun at

      @cloudgen: Yes, I used this on a project – can show you in our next jquery meetup.

  2. I'd also like to see an example of this as well… I struggled getting cycle to function at full screen.

  3. I use Cycle in original setting and make this full bg: http://www.ctofisio.com.br/inicial/

  4. If resize show scroll bar. Don't is the better solution, is only a alternative.

  5. akv292 at

    Hey guys,

    I am in the process of building a jQuery plugin right now that allows for fullscreen background slideshows with jQuery Cycle Plugin. The goal is to create a simple way for all transitions to work seamlessly (hence why I'm working on a plugin). Right now, you just pass my plugin (MaxImage) your cycle options in exactly the same format as you would if you were calling Cycle on it's own.

    You can find the beta release info at: http://www.aaronvanderzwan.com/blog/2011/11/maxim

    I'm very curious what people think so let me know if you like how I'm doing things or if there is anything you think I should change.

    Thanks.