Here is the HTML code to display the slideshow above


<link rel="stylesheet" media="screen" href="aaronjay-slideshow.css">
<script language="JavaScript" type="text/javascript" src="aaronjay-slideshow.js"></script>

<div class="slideshow">

<a href="about.html"><img src="images/splash1.jpg" title="Company Overview"></a>
<a href="facilities.html"><img src="images/splash2.jpg" title="Our Infrastructure"></a>
<a href="infrastructure.html"><img src="images/splash3.jpg" 
	title="Infrastructure as a Service"></a>
<a href="/disaster-recovery.html"><img src="images/splash4.jpg" title="Disaster Recovery"></a>
<a href="/desktop.html"><img src="images/splash5.jpg" title="Desktop as a Service"></a>

</div>

<div class="SlideThumbNails" style="text-align: center">
	<img src="images/thumbnail1.jpg">
	<img src="images/thumbnail2.jpg">
	<img src="images/thumbnail3.jpg">
	<img src="images/thumbnail4.jpg">
	<img src="images/thumbnail5.jpg">
</div>

Here is the aaronjay-slideshow.css file

.slideshow { 
	position:relative; 
	margin: 0 auto;
	padding: 0 auto;
	text-align: left; 
	height: 335px; 
	width: 961px; 
}
.slideshow img { 
	position: absolute; 
	left:0; 
	top:0; 
}
	
div.slide_description {
	position: absolute;
	text-align: center;
	left: 35px;
	bottom: 10px; /* On the bottom */
	background-color: black;
	font-family: 'tahoma';
	font-size: 15px;
	width: 870px;
	color: white;
	padding: 10px;
}


Here is the aaronjay-slideshow.js file

/* --------------------------------------------------------------------- 
Aaron Jay Slide Show 10/27/11 - Written by Aaron Jay Lieberman - aaronjayboca@gmail.com
Initial Version 5/19/11 (c) Premium-Programming.com 
------------------------------------------------------------------------ */

$(function(){
	function MyFadeOut(i) {
		$($('div.slideshow img')[i]).fadeOut();
		$($('div.SlideThumbNails img')[i]).animate({opacity: 0.4}, 500);
		$($('div.slide_description')[i]).hide();
	}
	function MyFadeIn(i) {
		$($('div.slideshow img')[i]).fadeIn();
		$($('div.SlideThumbNails img')[i]).animate({opacity: 1}, 500);
		$($('div.slide_description')[i]).fadeTo(1500, 0.7);
	}
	
	function UpdateSlideShow() {
		MyFadeOut(HighlightImage);
		HighlightImage++;
		if (NumImages <= HighlightImage) HighlightImage = 0;
		MyFadeIn(HighlightImage);
	}
					
	var NumImages = $('div.slideshow img').length;
	var HighlightImage = 0;

	// If title tags exist, turn img title into div tags for the description
	if ($('.slideshow img')[0].title != '') {
		for (i=0; i < NumImages; i++) {
			$('.slideshow').append('<div class="slide_description">' + $('.slideshow img')[i].title + '</div>');
		}
	}

  	// fade everything but the first thumbnail.
	$('.slideshow img:gt(0)').hide();
	$('.SlideThumbNails img:gt(0)').animate({opacity: 0.4}, 500);
	$('.slide_description').hide();
	$($('div.slide_description')[0]).fadeTo(1500, 0.7);

	var IntervalID = setInterval(function(){
		UpdateSlideShow();
	}, 4000);
	
	$('.SlideThumbNails').click(function(e) {
		clearInterval(IntervalID);
		MyFadeOut(HighlightImage);
		HighlightImage = $(e.target).index();
		MyFadeIn(HighlightImage);
	});
});