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);
});
});