CrossSlide JQuery Plugin Test

Saturday, March 21, 2009 - 13:37

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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.

1
2
3
4
5
6
7
8
9
10
$(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.

1
2
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:

1
2
3
4
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.

1
2
3
4
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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.

Category: 
philipnorton42's picture

Philip Norton

Phil is the founder and administrator of #! code and is an IT professional working in the North West of the UK.
Google+ | Twitter

Comments

Any idea how to extend the images duration? the transition is too fast....i wan to extend it.

Homepage: Sorry i dont have website. So i put yahoo.com. 

Can't get this to work on any Linux servers. Works fine on IIS but will not work at all under Linux.

I got this annoying message "Uncaught crossSlide: picture number 1 is too short for the desired fade duration." when the width is greater than 800 in pixel

I have this working in Dreamweaver on my mac, but when I download it to the web it doesn't show any images. I've put in the script tags in my header:
1
2
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cross-slide.min.js"></script>
And my slides are in a a slides folder. My div container is called 'slideshow" and is styled in a CSS file:
1
2
3
4
5
6
7
8
#slideshow {
        position:absolute;
        top:11px;
        left:344px;
        width:321px;
        height:321px;
        border:none;
}
Here's the code to call them up:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<div id="slideshow"></div>
 
<script>
  $(function() {
          $('#slideshow').crossSlide({
  fade: 3
}, [
  {
    src:  'slides/slide1.jpg',
    from: '100% 80% .50x',
    to:   '70% 20% 1.75x',
    time: 3
  }, {
    src:  'slides/slide2.jpg',
    from: '100% 40%',
    to:   'top left 1.5x',
    time: 3
  }, {
    src:  'slides/slide3.jpg',
    from: '100% 20% 1.6x',
    to:   '80% 0% 1.1x',
    time: 3
  }, {
    src:  'slides/slide4.jpg',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 3
  }, {
    src:  'slides/slide5.jpg',
    from: '100% 50%',
    to:   '30% 20% 1.5x',
    time: 3
  }, {
    src:  'slides/slide6.jpg',
    from: '80% 30%',
    to:   '100% 50% 1.5x',
    time: 3  
  }, {
    src:  'slides/slide7.jpg',
    from: '60% 30%',
    to:   '20% 0% 1.5x',
    time: 3
  }, {
    src:  'slides/slide8.jpg',
    from: 'top right',
    to:   'bottom left 1.5x',
    time: 3
  }, {
    src:  'slides/slide9.jpg',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 3
  }, {
    src:  'slides/slide10.jpg',
    from: '100% 100%',
    to:   '30% 50%',
    time: 3
  }, {
    src:  'slides/slide11.jpg',
    from: '70% 20%',
    to:   '20% 100% 1.5x',
    time: 3
  }, {
    src:  'slides/slide13.jpg',
    from: '80% 20%',
    to:   '50% 20% 1.75x',
    time: 3
  }, {
    src:  'slides/slide14.jpg',
    from: '100% 50%',
    to:   '0% 30% 1.5x',
    time: 3
  }, {
    src:  'slides/slide15.jpg',
    from: '100% 50%',
    to:   '20% 20% 1.5x',
    time: 3
  }, {
    src:  'slides/slide16.jpg',
    from: '100% 20%',
    to:   '30% 50% 1.5x',
    time: 3
  }
])
  });
</script>
Can you spot why it's going wrong online. I'm puzzled.
philipnorton42's picture
Submitted by philipnorton42 on Fri, 07/13/2012 - 23:26

Could be a number of things, but check that all of the files are uploaded and that they are accessible by the webserver/browser. You can check this by just entering the URL of the images into your address bar.

All the photos are accessible. I've tried taking them out of the "slides" folder and putting them in the main file with my index doc. Still nothing. I've tried moving my .js files to the same place so that everything is in the same folder. Still nothing. Each version works on my computer though. It's puzzling.

Is there a bug that might cause this plug-in not to work in 2013? I noticed that it did not work on the site anymore and did not change anything.

Tried to implement it on another site and also can;t get it to work there.

I like the Fancy Fading effect. Is there any way to make it responsive? and adapts to the width of the devices

Add new comment