Call Me Goon

This tutorial demonstrates how to create a simple image fade slideshow using jquery. We will use a plugin called the jQuery Cycle Plugin to make achieving this effect easier. "The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Options control how and when the slides are transitioned." There are numerous transitions besides just fade that can easily be implemented as well, including zoom, shuffle, turn down, etc. It is actually quite simple to implement, just follow the steps below and you'll quickly be on your way. You can also download the source files as a quick an easy to dig into the code.

Demo:

Code:

First, download the jquery framework. You can grab that here. Next, head over to the jQuery Cycle Plugin page and download the image cycle javascript file. Or you can download it directly here. You may have to copy the code from this page and save into a file, I called mine imageCycle.js. Next, create a new file called index.html. Within index.html, you need to call a couple javascript files, both jquery.js and the imageCycle.js we just downloaded. We also need to create a function to initiate the cycle plugin on a specific html element.

<script src="/js/jquery.min.js"></script>
<script src="/js/imageCycle.js"></script>
<script type="text/javascript">
$(function() {
if (!$('.pics').length > 0) return false;
$('.pics').cycle('fade');
});
</script>

For the HTML, I will create a div with a class of 'pics'. Within that div are simple img elements. The class of pics on our div is the trigger from our jquery function that creates that image rotation on all the img elements within our div.

<div class="pics">
  	<img src="images/1.png" width="205" height="147" alt="" title="" />
  	<img src="images/2.jpg" width="205" height="147" alt="" title="" />
  	<img src="images/3.jpg" width="205" height="147" alt="" title="" />
  	<img src="images/4.jpg" width="205" height="147" alt="" title="" />
  </div><!--end .pics-->

It's really as simple as that.

1. link to the jquery framework
2. link to the image cycle jquery plugin
3. create a function that links to a specific class to trigger the rotation (just copy the exact function I have included)
4. create a div with a class of 'pics' (or whatever trigger you chose to use in your function. If you just copied mine, it will be 'pics').
5. include the images with your div that you would like to fade in and out

You can always add your own custom styles to spice things up a bit if necessary, but I tried to keep this as simple as possible. Be sure to head over the jQuery Cycle Plugin page for even more features and image fade possibilities.

Download Source