bdesham · September 2, 2011 20:37
diff --git a/slideshow.css b/slideshow.css
 ul.slideshow {
 	list-style: none;
 	width: 294px;
 	height: 286px;
 	float: right;
 	overflow: hidden;
 	position: relative;
 	margin: 0;
 	padding: 0;
 	padding-left: 0.5em;
 }

 ul.slideshow li {
 	position: absolute;
 	left: 0;
 	right: 0;
 	opacity: 0.0;
 }

 ul.slideshow li.show {
 	z-index: 500;
 	opacity: 1.0;
 }
diff --git a/slideshow.html b/slideshow.html
 <!DOCTYPE html>

 <html>

 <head>
 	<title>Slideshow example</title>

 	<link rel="stylesheet" type="text/css" href="slideshow.css"/>

 	<script type="text/javascript" src=".../jquery-1.6.3.min.js"></script>
 	<script type="text/javascript" src="slideshow.js"></script>

 	<script type="text/javascript">
 		// start the slideshow when the page loads
 		$(document).ready(function() {
 			slideshow_start();
 		});
 	</script>
 </head>

 <body>
 	
 <ul class="slideshow">
 	<li class="show"><img src="screenshots/1.png" width="292" height="286" alt="Screenshot"/></li>
 	<li><img src="screenshots/2.png" width="292" height="286"/></li>
 	<li><img src="screenshots/3.png" width="292" height="286"/></li>
 	<li><img src="screenshots/4.png" width="292" height="286"/></li>
 	<li><img src="screenshots/5.png" width="292" height="286"/></li>
 	<li><img src="screenshots/6.png" width="292" height="286"/></li>
 </ul>


 </body>

 </html>
diff --git a/slideshow.js b/slideshow.js
 /*
 * Animate through a series of images with jQuery
 *
 * Given a <ul> containing a bunch of images in its list items (see the example
 * HTML file), this script collapses the list into one image, and fades between
 * the images indefinitely. (Animation is disabled if the user mouses over the
 * image.) The amount of time each image is shown and the speed of the animation
 * are configurable.
 *
 * Adapted by Benjamin Esham (http://www.bdesham.info) from a jQuery
 * [tutorial][] by Kevin Liew. This version removes the caption and tightens up
 * the code, making it work correctly with jQuery 1.6. Benjamin Esham releases
 * his changes into the public domain.
 *
 * [tutorial]: http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
 */

 // length of time (in milliseconds) each transition (e.g. fading in) will take

 var slideshow_speed = 1000;

 // length of time (in milliseconds) each image is shown

 var slideshow_delay = 5000;

 // global variables

 var slideshow_on = true;
 var slideshow_timeout;

 // slideshow_start
 //
 // Starts the slideshow up. Call this when the page loads, like
 //
 //     $(document).ready(function() {
 //         slideshow_start();
 //     });

 function slideshow_start()
 {
 	// jQuery's fadeIn() and fadeOut() seem to work separately from the CSS
 	// `opacity` property (although judging from the jQuery source, this should
 	// not be the case!). In the page's CSS--which probably loads before
 	// slideshow_start() is run--the images other than the first are made
 	// invisible so that they are not displayed under the first image. In the
 	// next line we restore their CSS opacity to 1, but only after calling
 	// jQuery's fadeOut() on them. Fading them out ensures that they are never
 	// shown under the first image; setting their opacity back to 1 means they
 	// will appear when we get around to calling fadeIn() on them.
 	$('ul.slideshow li').not('.show').fadeOut(0).css({opacity: 1.0});
 	$('ul.slideshow li.show').css({opacity: 1.0});
 	
 	// Pause the slideshow on mouse over
 	$('ul.slideshow').hover(
 		function () {
 			slideshow_on = false;
 			clearTimeout(slideshow_timeout);
 		}, 	
 		function () {
 			slideshow_on = true;
 			slideshow_queue_animation();
 		}
 	);

 	slideshow_queue_animation();
 }

 // slideshow_queue_animation
 //
 // Requests a transition after waiting for slideshow_delay milliseconds. This
 // properly clears any existing timeout, so call this instead of calling
 // slideshow_animate() directly.

 function slideshow_queue_animation()
 {
 	clearTimeout(slideshow_timeout);
 	slideshow_timeout = setTimeout(slideshow_animate, slideshow_delay);
 }

 // slideshow_animate
 //
 // Performs the animation and sets a timeout for the next one. Call
 // slideshow_queue_animation instead of calling this directly.

 function slideshow_animate()
 {
 	clearTimeout(slideshow_timeout);

 	if (!slideshow_on) {
 		// setTimeout(slideshow_animate) was called, but in the meantime
 		// the slideshow has been stopped (e.g. by the user mousing over the
 		// image)
 		return;
 	}

 	// If none of the list items has the "show" class, use the first image
 	var current = ($('ul.slideshow li.show')
 			? $('ul.slideshow li.show')
 			: $('ul.slideshow li:first'));

 	// Get the next image or loop back to the first image
 	var next = ((current.next().length)
 			? current.next()
 			: $('ul.slideshow li:first'));
 		
 	next.addClass('show').fadeIn(slideshow_speed);
 	
 	current.removeClass('show').fadeOut(slideshow_speed, function(){
 			slideshow_queue_animation();
 		});
 }

 // vim: tw=80 cc=+1
	ul.slideshow {
	list-style: none;
	width: 294px;
	height: 286px;
	float: right;
	overflow: hidden;
	position: relative;
	margin: 0;
	padding: 0;
	padding-left: 0.5em;
	}

	ul.slideshow li {
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0.0;
	}

	ul.slideshow li.show {
	z-index: 500;
	opacity: 1.0;
	}
	<!DOCTYPE html>

	<html>

	<head>
	<title>Slideshow example</title>

	<link rel="stylesheet" type="text/css" href="slideshow.css"/>

	<script type="text/javascript" src=".../jquery-1.6.3.min.js"></script>
	<script type="text/javascript" src="slideshow.js"></script>

	<script type="text/javascript">
	// start the slideshow when the page loads
	$(document).ready(function() {
	slideshow_start();
	});
	</script>
	</head>

	<body>

	<ul class="slideshow">
	<li class="show"><img src="screenshots/1.png" width="292" height="286" alt="Screenshot"/></li>
	<li><img src="screenshots/2.png" width="292" height="286"/></li>
	<li><img src="screenshots/3.png" width="292" height="286"/></li>
	<li><img src="screenshots/4.png" width="292" height="286"/></li>
	<li><img src="screenshots/5.png" width="292" height="286"/></li>
	<li><img src="screenshots/6.png" width="292" height="286"/></li>
	</ul>


	</body>

	</html>
	/*
	* Animate through a series of images with jQuery
	*
	* Given a <ul> containing a bunch of images in its list items (see the example
	* HTML file), this script collapses the list into one image, and fades between
	* the images indefinitely. (Animation is disabled if the user mouses over the
	* image.) The amount of time each image is shown and the speed of the animation
	* are configurable.
	*
	* Adapted by Benjamin Esham (http://www.bdesham.info) from a jQuery
	* [tutorial][] by Kevin Liew. This version removes the caption and tightens up
	* the code, making it work correctly with jQuery 1.6. Benjamin Esham releases
	* his changes into the public domain.
	*
	* [tutorial]: http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
	*/

	// length of time (in milliseconds) each transition (e.g. fading in) will take

	var slideshow_speed = 1000;

	// length of time (in milliseconds) each image is shown

	var slideshow_delay = 5000;

	// global variables

	var slideshow_on = true;
	var slideshow_timeout;

	// slideshow_start
	//
	// Starts the slideshow up. Call this when the page loads, like
	//
	// $(document).ready(function() {
	// slideshow_start();
	// });

	function slideshow_start()
	{
	// jQuery's fadeIn() and fadeOut() seem to work separately from the CSS
	// `opacity` property (although judging from the jQuery source, this should
	// not be the case!). In the page's CSS--which probably loads before
	// slideshow_start() is run--the images other than the first are made
	// invisible so that they are not displayed under the first image. In the
	// next line we restore their CSS opacity to 1, but only after calling
	// jQuery's fadeOut() on them. Fading them out ensures that they are never
	// shown under the first image; setting their opacity back to 1 means they
	// will appear when we get around to calling fadeIn() on them.
	$('ul.slideshow li').not('.show').fadeOut(0).css({opacity: 1.0});
	$('ul.slideshow li.show').css({opacity: 1.0});

	// Pause the slideshow on mouse over
	$('ul.slideshow').hover(
	function () {
	slideshow_on = false;
	clearTimeout(slideshow_timeout);
	},
	function () {
	slideshow_on = true;
	slideshow_queue_animation();
	}
	);

	slideshow_queue_animation();
	}

	// slideshow_queue_animation
	//
	// Requests a transition after waiting for slideshow_delay milliseconds. This
	// properly clears any existing timeout, so call this instead of calling
	// slideshow_animate() directly.

	function slideshow_queue_animation()
	{
	clearTimeout(slideshow_timeout);
	slideshow_timeout = setTimeout(slideshow_animate, slideshow_delay);
	}

	// slideshow_animate
	//
	// Performs the animation and sets a timeout for the next one. Call
	// slideshow_queue_animation instead of calling this directly.

	function slideshow_animate()
	{
	clearTimeout(slideshow_timeout);

	if (!slideshow_on) {
	// setTimeout(slideshow_animate) was called, but in the meantime
	// the slideshow has been stopped (e.g. by the user mousing over the
	// image)
	return;
	}

	// If none of the list items has the "show" class, use the first image
	var current = ($('ul.slideshow li.show')
	? $('ul.slideshow li.show')
	: $('ul.slideshow li:first'));

	// Get the next image or loop back to the first image
	var next = ((current.next().length)
	? current.next()
	: $('ul.slideshow li:first'));

	next.addClass('show').fadeIn(slideshow_speed);

	current.removeClass('show').fadeOut(slideshow_speed, function(){
	slideshow_queue_animation();
	});
	}

	// vim: tw=80 cc=+1