Here is a script I use.
var displayWaitMessage = true;
var activeImage = false;
var imageGalleryLeftPos = false;
var imageGalleryWidth = false;
var imageGalleryObj = false;
var maxGalleryXPos = false;
var slideSpeed = 0;
var imageGalleryCaptions = new Array();
function startSlide(e) {
if (document.all) e = event;
var id = this.id;
this.getElementsByTagName('IMG')[0].src = 'gallery/' + this.id + '_over.gif';
if (this.id == 'arrow_right') {
slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = -1 * slideSpeedMultiply;
slideSpeed = Math.max(-10, slideSpeed);
} else {
slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = 1 * slideSpeedMultiply;
slideSpeed = Math.min(10, slideSpeed);
if (slideSpeed < 0) slideSpeed = 10;
}
}
function releaseSlide() {
var id = this.id;
this.getElementsByTagName('IMG')[0].src = 'gallery/' + this.id + '.gif';
slideSpeed = 0;
}
function gallerySlide() {
if (slideSpeed != 0) {
var leftPos = imageGalleryObj.offsetLeft;
leftPos = leftPos / 1 + slideSpeed;
if (leftPos > maxGalleryXPos) {
leftPos = maxGalleryXPos;
slideSpeed = 0;
}
if (leftPos < minGalleryXPos) {
leftPos = minGalleryXPos;
slideSpeed = 0;
}
imageGalleryObj.style.left = leftPos + 'px';
}
setTimeout('gallerySlide()', 20);
}
function showImage() {
if (activeImage) {
activeImage.style.filter = 'alpha(opacity=50)';
activeImage.style.opacity = 0.5;
}
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
activeImage = this;
}
function initSlideShow() {
document.getElementById('arrow_left').onmousemove = startSlide;
document.getElementById('arrow_left').onmouseout = releaseSlide;
document.getElementById('arrow_right').onmousemove = startSlide;
document.getElementById('arrow_right').onmouseout = releaseSlide;
imageGalleryObj = document.getElementById('theImages');
imageGalleryLeftPos = imageGalleryObj.offsetLeft;
imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80;
maxGalleryXPos = imageGalleryObj.offsetLeft;
minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
for (var no = 0; no < slideshowImages.length; no++) {
slideshowImages[no].onmouseover = showImage;
}
var divs = imageGalleryObj.getElementsByTagName('DIV');
for (var no = 0; no < divs.length; no++) {
if (divs[no].className == 'imageCaption') imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
gallerySlide();
}
function showPreview(imagePath, imageIndex) {
var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
if (subImages.length == 0) {
var img = document.createElement('IMG');
document.getElementById('previewPane').appendChild(img);
} else img = subImages[0];
if (displayWaitMessage) {
document.getElementById('waitMessage').style.display = 'inline';
}
document.getElementById('largeImageCaption').style.display = 'none';
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex - 1); };
img.src = imagePath;
}
function hideWaitMessageAndShowCaption(imageIndex) {
document.getElementById('waitMessage').style.display = 'none';
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style.display = 'block';
}
window.onload = initSlideShow;
The CSS is this:
<style type="text/css">
.gallerycontainer
{
position: relative;
height:300;
}
.thumbnail img
{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover
{
background-color: transparent;
}
.thumbnail:hover img
{
border: 1px solid blue;
}
.thumbnail span
{
position: absolute;
background-color: Gray;
padding: 5px;
left: -500px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img
{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span
{
visibility: visible;
top: 220px;
left: 270px;
z-index: 100;
}
</style>
And the HTML is:
</div>
<div id="dhtmlgoodies_slideshow">
<div id="previewPane">
<img alt="image" src="gallery/image1_big.jpg"/>
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>
<div id="galleryContainer">
<div id="arrow_left"><img alt="left" src="gallery/arrow_left.gif"/></div>
<div id="arrow_right"><img alt="right" src="gallery/arrow_right.gif"/></div>
<div id="theImages">
<a href="#" onclick="showPreview('gallery/hangar1big.jpg','1');return false"><img alt="image1" src="gallery/hangar1small.jpg"/></a>
<a href="#" onclick="showPreview('gallery/image2_big.jpg','2');return false"><img alt="image2" src="gallery/image2.jpg"/></a>
<a href="#" onclick="showPreview('gallery/image3_big.jpg','3');return false"><img alt="image3" src="gallery/image3.jpg"/></a>
<a href="#" onclick="showPreview('gallery/image4_big.jpg','4');return false"><img alt="image4" src="gallery/image4.jpg"/></a>
<a href="#" onclick="showPreview('gallery/image5_big.jpg','5');return false"><img alt="image5" src="gallery/image5.jpg"/></a>
<a href="#" onclick="showPreview('gallery/image6_big.jpg','6');return false"><img alt="image6" src="gallery/image6.jpg"/></a>
<a href="#" onclick="showPreview('gallery/image7_big.jpg','7');return false"><img alt="image7"src="gallery/image7.jpg"/></a>
<a href="#" onclick="showPreview('gallery/image8_big.jpg','8');return false"><img alt="image8" src="gallery/image8.jpg"/></a>
<div class="imageCaption">Hangar Number One is in need of repair, but will be developed to the level of Hangar Two.</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
<div id="slideEnd"></div>
</div>
</div>
</div>