Please could somebody assist me…I am attempting to write a script which cycles through a series of foreground images, with a background image fading out inbetween each one. I also have a pause/unpause facility to stop the slideshow when the mouse is hovered over each image.
When executed as a local file, everything appears to work satisfactorily; when it is uploaded to a server, there appears to be a problem with the image preloading and caching, as each image is initially shown twice, before working as intended. I suspect the problem lies with the fade and opacity functions, as it works correctly when these are omitted. As a relative newcomer to programming, this has really got me stumped! Thankyou in advance, here’s the code:
html:
<div id=“photoHolder”>
<img src=“graphics/hawkwind.jpg” alt=“Photo” id=“thePhoto” name=“thePhoto” />
</div>
<script type=“text/javascript” src=“library/slideshowFadeExp4.js”></script>
css:
#photoHolder{
position:absolute;
top:400px;
left:27%;
width:45.5%;
height:350px;
b/order:8px dotted purple;
background-image:url(graphics/loading2.jpg);
background-position:50% 50%;
}
#thePhoto {
width:100%;
height:350px;
b/order:1px solid black;
}
script:
var i = 0;
var t = “”;
var imageId = “”;
var image = “”;
var preDisplay = “”;
var stopStart = document.getElementById(‘thePhoto’);
var gallery = new Array()
gallery[0] = new Image()
gallery[0] = “graphics/hawkwind.jpg”;
gallery[1] = new Image()
gallery[1] = “graphics/liveevil.jpg”;
gallery[2] = new Image()
gallery[2] = “graphics/customComet.jpg”;
gallery[3] = new Image()
gallery[3] = “graphics/bubble.jpg”;
document.write(“<style type=‘text/css’> #thePhoto {visibility:hidden;} </style>”); /* dynamically created stylesheet initially hides the Html image */
function activate()
{
t = setInterval(‘selectPic()’,5000);
}
function selectPic()
{
imageId = ‘thePhoto’; //for fadeIn function
image = document.getElementById(imageId); // for opacity function
preDisplay = document.getElementById(‘thePhoto’).src = gallery[i];
i++;
/* opacity and fadeIn */
setOpacity(image, 0);
image.style.visibility = “visible”;
fadeIn(imageId, 0)
}
function setOpacity(obj, opacity)
{
opacity = (opacity == 100)?99.999:opacity;
//IE 5-7
obj.style.filter = “alpha(opacity:”+opacity+“)”;
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity)
{
if (document.getElementById)
{
obj = document.getElementById(objId);
if (opacity <= 100)
{
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
detectEndPic()
}
function detectEndPic()
{
if (i> (gallery.length-1) )
{
i=0;
}
}
/********************************************************************** Pause and Unpause Slideshow **************************************************************/
if (document.attachEvent)
{
stopStart.attachEvent(‘onmouseover’,stop);
stopStart.attachEvent(‘onmouseout’,restart);
}
else if (document.addEventListener)
{
stopStart.addEventListener(‘mouseover’,stop,false);
stopStart.addEventListener(‘mouseout’,restart,false);
}
function stop()
{
clearInterval(t);
}
function restart()
{
i=0;
activate()
}
window.onload=activate;
