Hi there,

I am new to Javascripting but learning as I go. I have four questions about an image slideshow script on this page:
http://designisplay.com/test/words.html

1. In IE and on the iPhone the thumbnails show about 1px strip outside the arrows. I have the arrows aligned to the left edge and right edge of the gallery container but that tiny strip is still showing.

2. Safari bug: when you double click on a thumbnail the student name disappears (it is not supposed to). It is fine in FF and IE. The student name is the largeImageCaption in the js.

3. If a user clicks on a thumbnail while the page is loading, the word "undefined" shows up in large text on the left. This is a problem as it takes a while to load the page!

4. I would like the selected thumbnail to slide to the center when it is selected (with the exception of the first three and last three thumbnails which should stay to the edges). Does anyone have any idea how to do this?

My js is below:
(it can also be found here:
http://designisplay.com/test/slidesh...e-slideshow.js
and my css can be found here:
http://designisplay.com/test/slidesh...-slideshow.css)

var displayWaitMessage=true; // Display a please wait message while images are loading?


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 = 'images/' + 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 = 'images/' + 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()',30);

}

function showImage()
{
if(activeImage){
activeImage.style.filter = 'alpha(opacity=100)';
activeImage.style.opacity = 1;
}
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 - 38;
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;



Thank you so much for any help!! BTW, I did post my questions to the website where I got the script, but have had no replies since posting two months ago.