Code

Below are a selection of plugins and code samples which you may find useful

• Simple jQuery slideshow plugin v1.0

  This plugin creates a very simple slideshow effect - You can see it working on my homepage.

  Usage

  Create a set of images of the same size and place them in a list

  								
  	<ul class="myslideshow">
  		<li><a href="image1.jpg"><img src="image1.jpg" alt="" /></a></li>
  		<li><a href="image2.jpg"><img src="image2.jpg" alt="" /></a></li>
  		<li><a href="image3.jpg"><img src="image3.jpg" alt="" /></a></li>
  	</ul>					
  							

  Attach the slideshow within the jQuery ready event

  								
  	$(document).ready(function() {
  		$('.myslideshow').slideshow();
  	}							
  							

  Options

  fadeSpeed: How quickly to fate between images (in milliseconds)
  duration: How long each image should be displayed for (in milliseconds)

  For example:

  								
  		$('.myslideshow').slideshow({ fadeSpeed: "1000", duration: "5000" });
  							

  You should include the css file in your html head element and the javascript after the jQuery file call and before the jQuery ready call. Remember, all Javascript should go just before the closing body tag.

  Get the code (2KB zip)

• Simple jQuery accordion plugin v1.0

  This plugin creates a very simple accordion effect - You've just used it to read this!

  Usage

  Create a set of anchors and content and place them in a list

  								
  	<ul class="myaccordion">
  		<li>
  			<div class="anchor">
  				<h2>This is my header</h2>
  			</div>
  			<div class="content">
  				<p>This is my content</p>
  			</div>
  		</li>
  	</ul>					
  							

  Attach the accordion within the jQuery ready event

  								
  	$(document).ready(function() {
  		$('.myaccordion').accordion();
  	}							
  							

  Options

  speed: How quickly the panels slide up and down (in milliseconds)
  anchorHook: The name of the class or ID used as the anchor (.anchor is the default)
  contentHook: The name of the class or ID used as content (.content is the default)

  For example:

  								
  		$('.myaccordion').accordion({ speed: "1000", anchorHook: ".anchor", contentHook: ".content" });
  							

  The accordion automatically adds an 'open' class to the anchorHook element which can be used to create different effects, such as the green arrows on this page (included in the demo download file)

  You should include the css file in your html head element and the javascript after the jQuery file call and before the jQuery ready call. Remember, all Javascript should go just before the closing body tag.

  Get the code (7KB zip)