Slidesshow in javascript - php

Question

I am doing a slidesshow image in javascript:
function ImageLoop( images, speed, width, height ,inc){
this.img = images;
this.speed = speed;
this.width = width;
this.height = height;
this.interval = false;
this.play = false;
if (inc > this.img.length-1){
this.index = this.img.length-1;
} else {
this.index = inc;
}
this.returned = false;
function preloadImages(){
for (i in this.img){
var _i = new Image();
i.src = this.img[i];
}
}
preloadImages();
thisObj = this;
function onInterval( ){
thisObj.next();
}
function set(index) {
var im = document.getElementById("imageloop");
if (index > this.img.length-1){
var idx = this.img.length-1;
} else {
var idx = index;
}
im.src = this.img[idx];
}
function next( ){
if (this.play){
if (next == this.img.length-1){
this.returned = false;
}
if ((this.index == this.img.length-1) && !this.returned){
this.returned = true;
return;
}
var next = (this.index < this.img.length-1) ? ++this.index : 0;
this.set(next);
}
}
function start( ){
this.play = true;
if (!this.interval){
this.interval = setInterval(onInterval, this.speed);
}
}
function stop( ){
this.play = false;
if (this.interval){
clearInterval(this.interval);
this.interval = false;
}
}
function changeSpeed( adjust ){
this.speed += adjust;
clearInterval(this.interval);
this.interval = setInterval(onInterval, this.speed);
}
function serendre( place ) {
switch (place){
case "beginning":
this.stop();
this.set(0);
break;
case "left":
this.stop();
var next = (this.index > 0) ? --this.index : this.img.length-1;
this.set(next);
break;
case "right":
this.stop();
var next = (this.index < this.img.length-1) ? ++this.index : 0;
this.set(next);
break;
case "end":
this.stop();
this.set(this.img.length-1);
break;
}
}
// Setup
var d = document.getElementById("il");
var image = "<img src='" + this.img[this.index] + "' id='imageloop' width='" + this.width + "' height='" + this.height + "' />";
d.innerHTML = image;
// Add Functions
this.preloadImages = preloadImages;
this.set = set;
this.next = next;
this.start = start;
this.stop = stop;
this.changeSpeed = changeSpeed;
this.serendre = serendre;
}
In IE is working fine but on other I have problem. Like when I set the index to a other number and start it in Ie working but on other it start from index 0. I don't know what is the problem of it. Can someone help me with that ?

Answer 1

I do not know your goal in what you are doing. But if you just need that functionality (image slideshow), consider using existing javascript library and solution.
For jQuery it can be:
http://sorgalla.com/projects/jcarousel/
http://gmarwaha.com/jquery/jcarousellite/
http://thomlx.free.fr/jquery/jquery_carousel.htm

Answer 2

I really like Lytebox. It has the slideshow feature you want (as well as others) and is very easy to use. It also works in IE6, etc.

Answer 3

The best approach to creating JS code that is compatible with all somewhat modern browsers (starting with IE6 and Firefox2) is to use a javascript library that takes care of those things for you. jQuery is an excellent library that has many plugins, including slideshows etc... You can find more information at link text and a bunch of great examples of UI features such as slideshows at link text
all the best,
yuval