Creating an image slideshow

We use jQuery Cycle Plugin, please see here for documentation: jQuery Cycle Plugin

Accounting for Javascript disabled

If Javascript is unsupported or disabled in the web browser viewing the page, all the images will display at the same time since the style formating is comming from the plugin. So a simple solution is to use css display: none on the images displayed after the initial image.

	<meta charset="UTF-8">
	<script type="text/javascript" src=""></script>
	<script type="text/javascript" src="/jquery.cycle.lite.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
				fx: 'fade',
				speed: 2500

	<style type="text/css">
		#slideshow img { display: none }
		#slideshow img.first { display: block }

	<div id="slideshow">
		<img src="image1.jpg" width="200" height="200" class="first" />
		<img src="image2.jpg" width="200" height="200" />
		<img src="image3.jpg" width="200" height="200" />

27 Old Gloucester Street, London, WC1N 3AX - Tel: 020 7112 8799 - Fax: 020 7112 8558
Copyright © XYZ Directories - All Rights Reserved