homepage Welcome to WebmasterWorld Guest from 54.197.15.196
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript slide show
Slide show not working
TheKG

5+ Year Member



 
Msg#: 4630684 posted 6:30 pm on Dec 14, 2013 (gmt 0)

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();" />
</div>


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: [
'/images/Slideshow/second.jpg',
'/images/Slideshow/third.jpg',
'/images/Slideshow/fourth.jpg',
'/images/Slideshow/fifth.jpg'
],
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;
slider.imgs.push(img);

// 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;
}
slider.imgs.push(img);
}

setTimeout(slider.fadeNext, slider.bewtweenFades);
},

/* initialize fade transition into the next image */
fadeNext: function() {
slider.current++;

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
slider.current--;
setTimeout(slider.fadeNext, 1000);
return;
}

// 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.imgArea.appendChild(img);

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];
slider.imgArea.removeChild(firstImg);
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!

 

COBOLdinosaur



 
Msg#: 4630684 posted 7:58 pm on Dec 16, 2013 (gmt 0)

onload="slider.init();

Should be on the body tag, not the image:

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

TheKG

5+ Year Member



 
Msg#: 4630684 posted 8:44 pm on Dec 16, 2013 (gmt 0)

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!

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4630684 posted 9:27 pm on Dec 16, 2013 (gmt 0)

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.

TheKG

5+ Year Member



 
Msg#: 4630684 posted 9:58 pm on Dec 16, 2013 (gmt 0)

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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4630684 posted 11:39 pm on Dec 16, 2013 (gmt 0)

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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4630684 posted 2:00 pm on Dec 19, 2013 (gmt 0)

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).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved