0

I've got a photo gallery button on my website. I've got one button that looks like a forward arrow, which works fine and a back arrow, which does nothing. Also clicking on the thumbnail to view a larger one works fine. Everything is fine except for the back arrow.

Here is some code below:

function prevPic(){
    imgNum = imgNum - 1;
    if(imgNum<=1){
        imgNum = 1;
        groupNum = groupNum - 1;
    }
    switch(imgNum){
        case 1:
            document.getElementById("full").src="images/tanks1.jpeg";
            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";
        break;
        case 2:
            document.getElementById("full").src="images/tanks1.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";
        break;
        case 3:
            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";
        break;
        case 4:
            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";
        break;
        case 5:
            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";
        break;
        case 6:
            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";
        break;
    }
}

And my entire javascript code if that might help:

<script type="text/javascript">

var imgNum = 0;
var groupNum = 1;

function showFullSize(imgNum){
    switch(imgNum){
        case 1:
            document.getElementById("full").src="images/tanks1.jpeg";
            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 = 1;
        break;
        case 2:
            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";
            imgNum = 2;     
        break;
        case 3:
            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";
            imgNum = 3;
        break;
        case 4:
            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";
            imgNum = 4;
        break;
        case 5:
            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";
            imgNum = 5;
        break;  
        case 6:
            document.getElementById("full").src="images/platform2.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/bar2.jpg";
            document.getElementById("bar6").src="images/bar.jpg";
            imgNum = 6;
        break;  
    }
}

function nextPic(){ 
    imgNum = imgNum + 1;
    if(imgNum>=6){
        imgNum = 0;
        groupNum = groupNum + 1;
    }
    switch(imgNum){
        case 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";
        break;
        case 2:
            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";
        break;
        case 3:
            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";
        break;
        case 4:
            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";
        break;
        case 5:
            document.getElementById("full").src="images/platform2.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/bar2.jpg";
            document.getElementById("bar6").src="images/bar.jpg";
        break;
    }
}

function prevPic(){
    imgNum = imgNum - 1;
    if(imgNum<=1){
        imgNum = 1;
        groupNum = groupNum - 1;
    }
    switch(imgNum){
        case 1:
            document.getElementById("full").src="images/tanks1.jpeg";
            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";
        break;
        case 2:
            document.getElementById("full").src="images/tanks1.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";
        break;
        case 3:
            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";
        break;
        case 4:
            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";
        break;
        case 5:
            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";
        break;
        case 6:
            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";
        break;
    }
}

</script>

And here is where I call the functions in my page:

<img src="images/leftarrow.png" onlick="prevPic()"/><img id="full" width="640" height="480" src="images/tanks1.jpeg"/><img src="images/rightarrow.png" onclick="nextPic()"/></center>
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by Helianthus
0

You have a typo for your prevPic(). You are missing the c in onclick.

<img src="images/leftarrow.png" onlick="prevPic()"/><img id="full" width="640" height="480" src="images/tanks1.jpeg"/><img src="images/rightarrow.png" onclick="nextPic()"/></center>

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.