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!

  • http://www.cloudgen.w0ng.hk Cloudgen

    Caphun, any demonstration?

    • caphun

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

  • http://www.facebook.com/MrSeanG Sean Gallagher

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

  • http://www.vitorgga.com VitorGGA

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

    • caphun

      @VitorGGA: have you tried making your browser window small then resizing it after the page loads see if the full bg is still full?

    • Tárcio Zemel

      Nice! How you do this?

  • http://www.vitorgga.com VitorGGA

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

  • akv292

    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.