Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Javascript slide show

Slide show not working



6:30 pm on Dec 14, 2013 (gmt 0)

5+ Year Member

After searching the web, I found this code for a slideshow, but cannot get it to work. Only the first image displays in both IE and Firefox.

I first defined the div in my css and referenced the script in the head of my document.

This is in the body

<div id="slider">
<img src="/images/Slideshow/first.jpg" alt="" onload="slider.init();" />

This is the script

var slider = {
freq: 18, // time between each frame in milliseconds
fadeStep: 2, // amount of opacity to increase at each frame (until it reaches 100)
bewtweenFades: 3000, // time to wait between slider changes

// here go slider files except the first one, which is defined in html
imgFiles: [
current: 0, // index number of currently visible slider
imgs: [], // here we will load image elements of all sliders

init: function() {
slider.imgArea = document.getElementById('slider');

// load the first slider <img> into imgs (from html DOM)
// the 'loaded' property is used later on to prevent from displaying an
// image that has not been fully downloaded
var img = slider.imgArea.getElementsByTagName('img')[0];
img.loaded = true;

// create remaining <img> elements and load into imgs
for (var i=0; i<slider.imgFiles.length; i++) {
img = document.createElement('img');
img.src = slider.imgFiles[i];
img.onload = function() {
this.loaded = true;

setTimeout(slider.fadeNext, slider.bewtweenFades);

/* initialize fade transition into the next image */
fadeNext: function() {

if (slider.current >= slider.imgs.length) {
// reached the end of sequence - start from beginning
slider.current = 0;

if (!slider.imgs[slider.current].loaded) {
// give up if image is not loaded and try again in a second
setTimeout(slider.fadeNext, 1000);

// add the next image to DOM just after currently visible <img>
// initially at opacity 0
var img = slider.imgs[slider.current];
slider.setOpacity(img, 0);


slider.opacity = 0; // internal opacity counter (doesn't affect display)
slider.currentImg = img;
setTimeout(slider.fadeIn, slider.freq);

/* fade in <img> */
fadeIn: function() {
slider.opacity += slider.fadeStep;
if (slider.opacity > 100) {
slider.opacity = 100;

slider.setOpacity(slider.currentImg, slider.opacity);

if (slider.opacity < 100) {
// continue fading
setTimeout(slider.fadeIn, slider.freq);
} else {
// fading finished - new <img> is fully visible
// so let's remove old <img> from DOM
var firstImg = slider.imgArea.getElementsByTagName('img')[0];
setTimeout(slider.fadeNext, slider.bewtweenFades);

/* cross-browser set opacity to element */
setOpacity: function(elem, op) {
op = Math.round(op);
elem.style.opacity = op/100;
elem.style.filter = "alpha(opacity=" + op + ")";

//from sitepoint.com/forums/showthread.php//

Any assistance is greatly appreciated!


7:58 pm on Dec 16, 2013 (gmt 0)


Should be on the body tag, not the image:

<body onload="slider.init();">


8:44 pm on Dec 16, 2013 (gmt 0)

5+ Year Member

I changed the onload as you advised, but the results are the same. As I am a newbie when it comes to Javascript, I have no idea where in the script I should be looking for errors, if any. As I stated, I copied this from the internet and thought I followed all the instructions correctly, i.e., where to place the script and call it into use on the page. Even when I include it on the page, this does not work.

I would not be adverse to using another script, but haven't been able to find one. I want to use only css and javascript. If you have a suggested script, I would certainly welcome it.

Thank you!


9:27 pm on Dec 16, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

The code, as you've pasted it above, is missing the following at the very end:


That corresponds to var slider = {

If you add that, and if your image files actually exist, then the script should work. Note, if any of the image files give you a 404 (or don't load for some other reason), then this slideshow will be "stuck" at the image before the one with a 404. If, however, your first.jpg image isn't found, then it would never load at all, since it's the onload of that image that initializes the slider.


9:58 pm on Dec 16, 2013 (gmt 0)

5+ Year Member

I appreciate the quick response, Fotiman, but that also did not work. Still the same result; only the first picture shows. All are uploaded and listed correctly in the array.


11:39 pm on Dec 16, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Can you PM me a link and I'll take a look?


2:00 pm on Dec 19, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

The problem turned out to be 404 errors on the images (for anyone that might find this thread and be interested). Once that was corrected, the slider image would appear below the existing image, so to correct that the images were positioned absolutely so they appeared on top of each other (the new image would fade in on top of the old image).

Featured Threads

Hot Threads This Week

Hot Threads This Month