#! code

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).

Simple Fading

The simple fading is nice and easy and can be accomplished with just a few lines of code and a div tag.

<script type="text/javascript">
  //<!--
  $(function(){
    $('#crossslide').crossSlide({
     sleep: 2,
     fade: 1
    }, [
     { src: 'google.png' },
     { src: 'w3c.png' },
     { src: 'php.png' }
    ]);
  });
  // --> 
</script>

This uses the following div tag as a place holder to display the images.

<div id="crossslide" style="width:500px;height:500px;"></div>

Here is an example of the script in action.

If you want to add a link to each image, so that the user can click on the current image and be taken to a page, then you can use the href attribute of the image.

<script type="text/javascript">
  //<!--
  $(function(){
    $('#crossslide').crossSlide({
     sleep: 2,
     fade: 1,
     shuffle: true
    }, [
     { src: 'google.png',
      href:'http://www.google.com/' },
     { src: 'w3c.png',
      href:'http://www.w3c.com/' },
     { src: 'php.png',
      href:'http://www.php.net/' },
    ]);
  });
  // --> 
</script>

I have also included the shuffle parameter here, which can be used to randomise the order of the images.

Here is an example of the same script as above, but with the addition of the href attribute.

Fancy Fading

A different effect of fading can be achieved by using the speed option (instead of the sleep option) and using a dir attribute for each image. Speed is an option that sets how fast an image will scroll across the area. The direction of the scroll can be controlled through the dir attribute.

Use the following code to create this effect.

$(function(){
 $('#crossslide').crossSlide({
  speed: 45,
  fade: 1
 }, [
  { src: 'google.png', dir:'up'   },
  { src: 'w3c.png', dir:'down' },
  { src: 'php.png', dir:'left' }
]);
});

Be careful here, if the div is even 1 pixel bigger than your image then you will have a funny error that states:

uncaught exception: crossSlide: picture number 1 is too short for the desired fade duration.

Took me a minute or two to track down but it makes sense because the JavaScript is trying to create an animation that moves the image past the div in the style of a window. If the div is larger than the image then this effect can't be created and so it fails. Because my images are 500x300 pixels I have created a div that is 100 pixels smaller on each side.

<div id="crossslide" style="width:400px;height:200px;">Loading...</div>

Here is an example of the fancy fading script in action.

The href attribute still works with this style so you can include it if you want to.

Ken Burns Fading

The Ken Burns effect is basically a panning and zooming effect, and is a nice effect for a still image. It is the most complicated of the three effect styles to implement, but this is just due to the number of options it takes.

This effect differs from the other effects as you need to include it in inside a DOM-ready handler.

jQuery(function($) {
});

Each image must have a src, from, to and time attribute. The src attribute is the same as before and is just a reference to the image. The to and from attributes follow the same syntax as the background position CSS rule, but with the addition of a third parameter which controls the zooming. The time attribute is used to control how long the panning and zooming will take.

So, to pan from top right to bottom left in 2 seconds you would use the following:

src:  'w3c.png',
from: 'top right',
to:   'bottom left',
time: 2

To zoom in at the same time you simply include the third parameter. A value of 1.0x is the same size as the original image so the following code makes the image bigger whilst panning.

src:  'w3c.png',
from: 'top right' 1.0x,
to:   'bottom left' 1.5x,
time: 2

The href attribute can also be used with this fade style. Here is code code that uses different effects across three images.

jQuery(function($) {
 $('#crossslide').crossSlide({
  fade: 1
 }, [
  {
   src:  'google.png',
   href: 'http://www.google.com/',
   from: '50% 100% 1x',
   to:   '50% 0% 5.7x',
   time: 3
  }, {
   src:  'w3c.png',
   href: 'http://www.w3c.com/',
   from: 'top left',
   to:   'bottom right',
   time: 2
  }, {
   src:  'php.png',
   href: 'http://www.php.net/',
   from: '100% 80% 1.9x',
   to:   '80% 0% 1.1x',
  time: 2
  }
 ]);
});

Here is an example of the Ken Burns Effect script in action.

Conclusion

This is a very nice effect plugin that is quite easy to implement and runs very well (at least on the browsers I've tested it on). Using this plugin allows you to move away from using flash to do the same thing. It is nice that you can enclose it into any element, rather than be forced to use an image tag.

The only thing I would say that needs improvement is that the plugin should trigger some callback events (like onchange) so that it can be tied into an application. At the moment it can only be used as a neat little effect on a page, but I can see lots of potential for it. Also, if you any images are missing from the list the plugin simply does nothing. If the image isn't there then the plugin should skip over it.