In today’s World Wide Web many websites are featuring projects or artwork on their homepage via a crossfading gallery. In the past this was normally done by an Adobe Flash movie but these days it is usually much easier to implement with Javascript.

A Javascript solution provides many benefits such as cross browser support, no plugins required and highly improved performance. There are many different ways to implement a crossfade in Javascript, many of them very complex, so today I will be showing you how this effect can be achieved with the jQuery framework, Cycle plugin and only a few lines of code.

First of all you must include the jQuery JavaScript by either downloading it from jQuery or including it right from their website.

Next we must download the Cycle plugin and include it from your computer.

Next step is to define your slideshow files in HTML. Simply write your img tags into a slideshow div tag.

Finally all you have to do is include an inline Javascript function to initiate the cycler. Remember to match up the class name of the slideshow div with the class name in the function.

<script type="text/javascript">
$(document).ready(function() {
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

That's it, a Javascript crossfading gallery in minutes. To see examples and additional effects that the cycle plugin can perform, please see the cycle plugin website.