Slideshow thing - next, previous problem

JavaScript
1

hi i have a slideshow with forward and previous buttons.
I have this code inside a function , i post it as i think it is the relevant part.


function next(){
		if(that.current>3){
			that.current=0;
		}
		images[0].style.zIndex=1;
		images[3].style.zIndex=1;
		images[2].style.zIndex=1;
		images[1].style.zIndex=1;
		switch(that.current){
			case 0:
				if(that.repeat==0){
				images[0].style.visibility="visible";
				images[0].style.zIndex=6;
				showInfo(info[0],0);
				}else{
				images[0].style.zIndex=5;
				images[3].style.zIndex=6;
				fadeOut(images[3],0,images[0]);
				showInfo(info[0],0);
				}
				break;
			case 1:
				images[1].style.zIndex=5;
				images[0].style.zIndex=6;
				fadeOut(images[0],0,images[1]);
				showInfo(info[1],0);
				break;
			case 2:
				images[2].style.zIndex=5;
				images[1].style.zIndex=6;
				fadeOut(images[1],0,images[2]);
				showInfo(info[2],0);
				break;
			case 3:
				images[3].style.zIndex=5;
				images[2].style.zIndex=6;
				fadeOut(images[2],0,images[3]);
				showInfo(info[3],0);
				break;
	
		}
		that.repeat=1; 
	}
	function previous(){
		if(that.current<0){
			that.current=3;
		}
		images[0].style.zIndex=1;
		images[3].style.zIndex=1;
		images[2].style.zIndex=1;
		images[1].style.zIndex=1;
		switch(that.current){
			case 0:
				images[0].style.zIndex=6;
				images[3].style.zIndex=5;
				fadeOut(images[0],0,images[3]);
				showInfo(info[3],0);
				break;
			case 1:
				images[1].style.zIndex=6;
				images[0].style.zIndex=5;
				fadeOut(images[1],0,images[0]);
				showInfo(info[0],0);
				break;
			case 2:
				images[2].style.zIndex=6;
				images[1].style.zIndex=5;
				fadeOut(images[2],0,images[1]);
				showInfo(info[1],0);
				break;
			case 3:
				images[3].style.zIndex=6;
				images[2].style.zIndex=5;
				fadeOut(images[3],0,images[2]);
				showInfo(info[2],0);
				break;
	
		}
		that.repeat=1;
	}
	next();
	that.loop=setInterval(function(){that.current++;next();},5000);
	var linkNext=document.getElementById("next");
	linkNext.onclick=function(){clearInterval(that.loop);that.current++;next();}
	var linkPrev=document.getElementById("prev");
	linkPrev.onclick=function(){that.previous=1;clearInterval(that.loop);that.current--;previous();}

You can see the working script here http://web-in-a-box.co.cc/#
The problems is that when first clicked previous decrements

that.current

by 2, not by 1 as internded , for the first click. Next clicks are ok in the same function, but when you click next ,after you’ve clicked previous , next also increments by 2 .

2

You have forgotten to return false from the next/previous link onclick events.

Not returning false from those events causes a new page to load.

3

thank you for your reply.
I’ve tried this:

linkPrev.onclick=function(){that.previous=1;clearInterval(that.loop);that.current--;previous();return false;}

and the other way


linkPrev.addEventListener("click",function(){clearInterval(that.loop);that.current--;previous();},false);

But nothing changes in the execution.

4

The web page with your code does not appear to have been updated yet.

Use the first attempt that you posted before, and please for gods sake reformat the code so that it is more understandable, such as:


linkPrev.onclick=function() {
    that.previous=1;
    clearInterval(that.loop);
    that.current--;
    previous();
    return false;
}
5

for (i = 0; i < images.length; i += 1) {
images[i].style.zIndex = 5;
}

for that one i agree.
but for the other one i don’t , because the z-index of the image i’ve choosed to promote, stays 6,


images[1].style.zIndex=6;
				fadeOut(images[0],0,images[1]);
				showInfo(info[1],0);

if the loop is repeated(you click previous more than 4 times, all images receive zIndex 6. see what happens : http://web-in-a-box.co.cc/ try looping through the previous 2 or 3 times then click next. (and the other way around)
I expect you have a solution for that as you’ve not stated all the reasons.


var next;
var previous;
...
that.next =function(){
		if(that.current>3){
			that.current=0;
		}
		for(var i=0;i<=3;i++){
			images[i].style.zIndex=1;
		}
		switch(that.current){
			case 0:
				if(that.repeat==0){
				images[0].style.visibility="visible";
				images[0].style.zIndex=6;
				showInfo(info[0],0);
				}else{
				images[3].style.zIndex=6;
				fadeOut(images[3],0,images[0]);
				showInfo(info[0],0);
				}
				break;
			case 1:
				images[0].style.zIndex=6;
				fadeOut(images[0],0,images[1]);
				showInfo(info[1],0);
				break;
			case 2:
				images[1].style.zIndex=6;
				fadeOut(images[1],0,images[2]);
				showInfo(info[2],0);
				break;
			case 3:
				images[2].style.zIndex=6;
				fadeOut(images[2],0,images[3]);
				showInfo(info[3],0);
				break;
	
		}
		that.repeat=1;
	}
	that.previous=function(){
		if(that.current<0){
			that.current=3;
		}
		for(var i=0;i<=3;i++){
			images[i].style.zIndex=1; 
		}
		switch(that.current){
			case 0:
				images[0].style.zIndex=6;
				fadeOut(images[0],0,images[3]);
				showInfo(info[3],0);
				break;
			case 1:
				images[1].style.zIndex=6;
				fadeOut(images[1],0,images[0]);
				showInfo(info[0],0);
				break;
			case 2:
				images[2].style.zIndex=6;
				fadeOut(images[2],0,images[1]);
				showInfo(info[1],0);
				break;
			case 3:
				images[3].style.zIndex=6;
				fadeOut(images[3],0,images[2]);
				showInfo(info[2],0);
				break;
	
		}
		that.repeat=1;
	}
	next();
	that.loop=setInterval(function(){that.current++;next();},5000);
var linkNext=document.getElementById("next");
	linkNext.onclick=function(){
		clearInterval(that.loop);
		that.current++;next();
	return false;
	}
var linkPrev=document.getElementById("prev");
	linkPrev.onclick=function(){
		clearInterval(that.loop);
		that.current--;
		previous();
	return false;
	}
6

i’ve removed the statement that.previous=1;
here is the code from the onclick events.


var linkNext=document.getElementById("next");
	linkNext.onclick=function(){
		clearInterval(that.loop);
		that.current++;
                next();
	return false;
	}
var linkPrev=document.getElementById("prev");
	linkPrev.onclick=function(){
		clearInterval(that.loop);
		that.current--;
		previous();
	return false;
	}

here is the updated site http://web-in-a-box.co.cc/

return false;

doesn’t do the trick.

7

That’s one of the problems sorted out now.

There are several other problems, but the main one is that the next function assumes that you’re coming from a previous image.

The standard technique here is to apply a setting to all images, and then to promote the chosen image in some way.

What you are currently doing is to set a zindex of 5 to only one image, and then a zindex of 6 to the particular chosen image.


case 1:
    images[1].style.zIndex=5;
    images[0].style.zIndex=6;
    fadeOut(images[0],0,images[1]);
    showInfo(info[1],0);
    break;

What will be more effective, is to set all of the images to 5, then to promote your particular image.


var i;
for (i = 0; i < images.length; i += 1) {
    images[i].style.zIndex = 5;
}
...
case 1:
    images[0].style.zIndex=6;
    fadeOut(images[0],0,images[1]);
    showInfo(info[1],0);
    break;
8

There is also a logic problem.

Consider this:

The current index is 1, and you press the next button.

  • current index increases to 2
  • image 1 is faded out
  • image 2 (the current index) is shown

Now you hit the previous button.

  • current index decreases to 1
  • image 1 (the current index) is faded out
  • image 0 is shown

Why the problem exists is due to the current index being used to specify both the image to fade out (in the next function) and the image to show (in the previous function).

The current index is currently wrongly used for two different purposes. Do you think that it’s possible to fix that by ensuring that both the next function and the previous function use the same frame of reference for the current image number?