Javascript Slideshow With Fade-out

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:


<div id=“photoHolder”>
<img src=“graphics/hawkwind.jpg” alt=“Photo” id=“thePhoto” name=“thePhoto” />
<script type=“text/javascript” src=“library/slideshowFadeExp4.js”></script>


b/order:8px dotted purple;
background-position:50% 50%;
#thePhoto {
b/order:1px solid black;


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];

/* opacity and fadeIn */

setOpacity(image, 0); = “visible”;

fadeIn(imageId, 0)

function setOpacity(obj, opacity)
opacity = (opacity == 100)?99.999:opacity;

//IE 5-7 = “alpha(opacity:”+opacity+“)”;

// Safari<1.2, Konqueror = opacity/100;

// Older Mozilla and Firefox = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3 = opacity/100;

function fadeIn(objId,opacity)
if (document.getElementById)
obj = document.getElementById(objId);

if (opacity &lt;= 100)												  
  setOpacity(obj, opacity);										  
  opacity += 10;  												  
  window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);     


function detectEndPic()
if (i> (gallery.length-1) )

/********************************************************************** Pause and Unpause Slideshow **************************************************************/

if (document.attachEvent)

else if (document.addEventListener)

function stop()

function restart()


Photo flash maker free is a good program, but as far as I can tell, you can’t resize your pictures.

Trying to create a javascript slideshow here… A program called Photo Flash Maker works well. :slight_smile:

Hi Magic Toolbox,

I need it for commercial use. I’ll keep it it mind though.

It’s free for non-commercial sites.

Hi Magic toolbox,

Thanks for replying. The slideshow you suggested is impressive, but unfortunately I am somewhat ‘between jobs’ at present (over a year) and have no money.

Try using a script that already does what you need.

Magic Slideshow fades images one into another and has pause/unpause on mouseover

Hi Logic Alli,

Thankyou for looking at the code. I’ve tried it but to no avail. If you add the src property in the preload section it just cycles through a series of blank images. I think the problem might be to do with the image and imageId variables; the Html image is assigned to these, but they are independant of the preload section. I’ll let you know if I figure it out…
Thanks again.

gallery[0] = new Image();
gallery[0][B][COLOR="Red"].src[/COLOR][/B] = "graphics/hawkwind.jpg";


Hi Trilli,

Thanks for your reply, I must confess I have not even begun to get my head around JQuery yet. It all seems very useful though; I might give it a go.

Hi Hallohimmel,

I have just been experimenting with the Photo Flash Maker- most impressive. There’s always something satisfying about getting your own code working, but then again, I’d have to do some serious learning to match that! Thanks for the link.

hi, you have free jquery plugin at free