Zou graag een fade effect willen als ik over de thumbnails ga
Zodat de foto's mooi in elkaar overvloeien.
Weet alleen niet waar ik onderstaande regel moet plaatsen in mijn script.
En of de onderstaande regel voldoende is om het effect te krijgen om dit
ik nog meer regels moet toevoegen?
var filterstring="progidXImageTransform.Microsoft.Grad ientWipe(GradientSize=1.0 Duration=0.7)"
Weet iemand waar ik dit in het script moet plaatsen alvast bedankt?
Het script staat op de onderstaande site.
http://members.home.nl/chrisklomp/image_slideshow. html
Of moet ik het hier aanpassen????
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()',20);
}
function showImage()
{
if(activeImage){
activeImage.style.filter = '';
}
this.style.filter = '';
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').offset Width - 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')imageGallery Captions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
gallerySlide();
}
function showPreview(imagePath,imageIndex){
var subImages = document.getElementById('previewPane').getElements ByTagName('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.displ ay='inline';
}
document.getElementById('largeImageCaption').style .display='none';
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
img.src = imagePath;
}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.displ ay='none';
document.getElementById('largeImageCaption').inner HTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style .display='block';
}
window.onload = initSlideShow;