problems with Javascript photo gallery

Question

SolidSora 0 Light Poster

12 Years Ago

I've got a photo gallery on my website, but it seems to glitch at case 3 in my prevPic function. Instead of going backward, it goes forward. In each case, I want it to decrease the imgNum and show the previous picture. Here is some code:

function prevPic(){
    /*imgNum = imgNum - 1;
    if(imgNum<=1){
        imgNum = 1;
        groupNum = groupNum - 1;
    }*/
    switch(imgNum){ 
        case 1:
        if(groupNum==1){
            document.getElementById("full").src="images/tanks2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }else{
            document.getElementById("full").src="images/tanks3.jpg";
            document.getElementById("bar1").src="images/bar.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }
        imgNum=0;
        break;
        case 2:
        if(groupNum==1){
            document.getElementById("full").src="images/tanks2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }else{
            document.getElementById("full").src="images/tanks4.jpg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }
        imgNum=1;
        break;
        case 3:
        if(groupNum==1){
            document.getElementById("full").src="images/house1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }else{
            document.getElementById("full").src="images/motors.jpg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }   
        imgNum = 2;
        break;
        case 4:
        if(groupNum==1){
            document.getElementById("full").src="images/house2.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }else{
            document.getElementById("full").src="images/controls.jpg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }
        imgNum = 3;
        break;

        case 5:
        if(groupNum==1){
            document.getElementById("full").src="images/platform1.jpeg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }else{
            document.getElementById("full").src="images/motors2.jpg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar.jpg";
            document.getElementById("bar6").src="images/bar2.jpg";
        }
        imgNum = 4;
        break;
        case 6:
        if(groupNum==1){
            document.getElementById("full").src="images/fence.png";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar.jpg";
        }else{
            document.getElementById("full").src="images/field.jpg";
            document.getElementById("bar1").src="images/bar2.jpg";
            document.getElementById("bar2").src="images/bar2.jpg";
            document.getElementById("bar3").src="images/bar2.jpg";
            document.getElementById("bar4").src="images/bar2.jpg";
            document.getElementById("bar5").src="images/bar2.jpg";
            document.getElementById("bar6").src="images/bar.jpg";
        }
        imgNum = 5;
        break;
    }
    document.getElementById("numfield").value=imgNum;
}

`

javascript

2 Contributors
1 Reply
142 Views
15 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by Taywin

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Taywin 312 Posting Virtuoso · Answer 1 · 2012-08-03T11:24:52+00:00

I'm not sure if the problem is actually from your script. I don't know how your script function in the page, so it is difficult to say what causes it.

PS: Your script is very lengthy. You could use a loop to do the bar1 to bar6 portion outside the "switch" statement and it would be cleaner. (I am guessing your first part of bar1 in case 1 is incorrect.)

// all bar1 to bar6 display are related to imgNum
for (var i=1; i<=6; i++) {
  // note! imgNum must be a number or it will fail
  if (i==imgNum) { document.getElementById("bar"+i).src="images/bar.jpg" }
  else { document.getElementById("bar"+i).src="images/bar2.jpg" }
}

switch(imgNum) {
  case 1:
  if(groupNum==1) { document.getElementById("full").src="images/tanks2.jpeg"; {
  else { document.getElementById("full").src="images/tanks3.jpg"; }
  break;

  case 2:
  if(groupNum==1) { document.getElementById("full").src="images/tanks2.jpeg"; }
  else { document.getElementById("full").src="images/tanks4.jpg"; }
  break;

  case 3:
  if(groupNum==1) { document.getElementById("full").src="images/house1.jpeg"; }
  else { document.getElementById("full").src="images/motors.jpg"; }
  break;

  case 4:
  if(groupNum==1) { document.getElementById("full").src="images/house2.jpeg"; }
  else { document.getElementById("full").src="images/controls.jpg"; }
  break;

  case 5:
  if(groupNum==1) { document.getElementById("full").src="images/platform1.jpeg"; }
  else { document.getElementById("full").src="images/motors2.jpg"; }
  break;

  case 6:
  if(groupNum==1) { document.getElementById("full").src="images/fence.png"; }
  else { document.getElementById("full").src="images/field.jpg"; }
  break;
}
// The line below decreases imgNum value by 1 if and only if imgNum value
// is greater than 1 (the first image number); otherwise, it keeps statying
// at 1.
// If you do not understand why the script looks like that, please read about
// ternary statement.
imgNum = (imgNum>1) ? (imgNum-1) : 1

document.getElementById("numfield").value=imgNum;