CrossSlide image a Jquery plugin

CrossSlide is a neat plugin for JQuery that allows you to fade in from one image to the next, and even using some cool visual effects like panning. So I thought I would see how hard it is to set up and what sort of limitations is has (if any).

CrossSlide can do a few different things, depending on how it's called:

Slide + cross-fade
This is the kind of animation from which the plugin takes its name. Here is the jQuery code to set it up:

$(function() {
 $('#test1').crossSlide({
   speed: 45,
   fade: 1
   }, [
    { src: 'lib/sand-castle.jpeg', dir: 'up'   },
    { src: 'lib/sunflower.jpeg',   dir: 'down' },
    { src: 'lib/flip-flops.jpeg',  dir: 'up'   },
    { src: 'lib/rubber-ring.jpeg', dir: 'down' }
  ]);
});

Static cross-fade
Pretty simple effect, whose invocation is just as simple:

$(function() {
 $('#test2').crossSlide({
  sleep: 2,
  fade: 1
 }, [
    { src: 'lib/sand-castle.jpeg' },
    { src: 'lib/sunflower.jpeg'   },
    { src: 'lib/flip-flops.jpeg'  },
    { src: 'lib/rubber-ring.jpeg' }
  ]);
});

Notice how the sleep parameter has taken the place of speed, as there can be no speed in an image that's not moving. fade is still expressed in seconds and is additional to the sleep time. You cannot use both speed and sleep at the same time, because they mean different effects.

Ken Burns effect
Finally, CrossSlide can be brought up to the full visual power of a Ken Burns effect: panning, zooming and fading to specific points, to guide the eye of the viewer and convey meaning:

$(function() {
  $('#test3').crossSlide({
    fade: 1
     }, [
   {
     src:  'lib/sand-castle.jpeg',
     href: 'http://flickr.com/photos/spacetrucker/94209642/',
     from: '100% 80% 1x',
     to:   '100% 0% 1.7x',
     time: 3
   }, {
     src:  'lib/sunflower.jpeg',
     href: 'http://flickr.com/photos/hichako/1125341449/',
     from: 'top left',
     to:   'bottom right 1.5x',
     time: 2
   }, {
     src:  'lib/flip-flops.jpeg',
     href: 'http://flickr.com/photos/jayniebell/1125216143/',
     from: '100% 80% 1.5x',
     to:   '80% 0% 1.1x',
     time: 2
  }, {
     src:  'lib/rubber-ring.jpeg',
     href: 'http://flickr.com/photos/ruminatrix/1125292682/',
     from: '100% 50%',
     to:   '30% 50% 1.5x',
     time: 2
   }
]);
});

jquery.cross-slide.js(size: 11K; license: GPL; last updated on 14 May 2009)

See the jQuery documentation for more info.
Also visit gruppo4 for a nice sample demo.
Read More...