Javascript Photo Gallery Bug

Question

SolidSora 0 Light Poster

12 Years Ago

I have a photo gallery where there is a strip of thumbnails on the top and a full size image below. Basically when I click the thumbnails, it should show the full size image in the image placeholder known as "full" in my page. That works fine except I also have next and back buttons to navigate the gallery. When someone clicks the next button, it doesn't go to the next image in the strip, but the last one that was viewed using the arrows. I have a variable called imageNum which is what determines the image you are looking at. When you click a thumbnail it should chainge the imageNum, but when you click an arrow it changes back to what it was before you clicked the thumbnail and doesn't go to the next one in the strip. Here is my code below:

var imgNum = 1;  //This is the number of the photo you are viewing in the thumbnail strip.
var groupNum = 1;  //This is the group of thumbnails you are viewing.  

function showFullSize(imgNum){
    //This function allows the user to click a thumbnail in the strip which will allow the corresponding thumbnail to be shown at a larger size in the main image placeholder.  

    switch(imgNum){
        case 1:
              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";
            if(groupNum==1){
              document.getElementById("full").src="images/fence.png";
              }
            else if(groupNum==2){
              document.getElementById("full").src="images/tanks3.jpg";
            }
            else{
                document.getElementById("full").src="images/motors3.jpg";
            }
            imgNum = 1;
        break;
        case 2:
              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";
            if(groupNum==1){
              document.getElementById("full").src="images/tanks1.jpeg";

            }else if(groupNum==2){
              document.getElementById("full").src="images/tanks4.jpg";
            }else{
                document.getElementById("full").src="images/motors4.jpeg";
            }
            imgNum = 2;     
        break;
        case 3:
            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";
        if(groupNum==1){
            document.getElementById("full").src="images/tanks2.jpeg";

        }else if(groupNum==2){
            document.getElementById("full").src="images/motors.jpeg";
        }
        else{
            document.getElementById("full").src="images/tanks5.jpeg";
        }
            imgNum = 3;
        break;
        case 4:
            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";
            if(groupNum==1){
              document.getElementById("full").src="images/house1.jpeg";

            }else if(groupNum==2){
              document.getElementById("full").src="images/valve.jpeg";
            }
            else{
                document.getElementById("full").src="images/controls2.jpeg";
            }
            imgNum = 4;
        break;
        case 5:
              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";
            if(groupNum==1){
              document.getElementById("full").src="images/house2.jpeg";
            }
            else if(groupNum==2){
              document.getElementById("full").src="images/motors2.jpg";
            }
            else{
                document.getElementById("full").src="images/motors5.jpeg";
            }
            imgNum = 5;
        break;  
        case 6:
            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";
        if(groupNum==1){
            document.getElementById("full").src="images/platform1.jpeg";

        }else if(groupNum==2){
            document.getElementById("full").src="images/field.jpg";
        }
        else{
            document.getElementById("full").src="images/shack.jpeg";
        }
            imgNum = 6;
        break;  
    }

}

function nextPic(){ 
    //This function is to switch the photo in the larger view to the next photo in the thumbnail strip.  This function will also allow the slider bar under the currently viewed thumbnail to highlight the next photo in the strip.  

    imgNum ++;

    showFullSize(imgNum);

    if(imgNum>6){
        nextGroup();
    }
}

function prevPic(){
    imgNum = imgNum - 1;
    showFullSize(imgNum);
    if(imgNum<1){
        if(groupNum>1){
          imgNum = 6;
          prevGroup();
        }else{
            imgNum=1;
        }
    }
}

function nextGroup(){
    groupNum = groupNum+1;
    imgNum = 1;
    if(groupNum==2){
        document.getElementById("preview1").src="images/tanks3.jpg";
        document.getElementById("preview2").src="images/tanks4.jpg";
        document.getElementById("preview3").src="images/motors.jpg";
        document.getElementById("preview4").src="images/valve.jpeg";
        document.getElementById("preview5").src="images/motors2.jpeg";
        document.getElementById("preview6").src="images/field.jpg";
        document.getElementById("full").src="images/tanks3.jpg";

    }else{
        document.getElementById("preview1").src="images/motors3.jpg";
        document.getElementById("preview2").src="images/motors4.jpeg";
        document.getElementById("preview3").src="images/tanks5.jpeg";
        document.getElementById("preview4").src="images/controls2.jpeg";
        document.getElementById("preview5").src="images/motors5.jpeg";
        document.getElementById("preview6").src="images/shack.jpeg";
        document.getElementById("full").src="images/motors3.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";

}

function prevGroup(){
    groupNum = groupNum-1;
    if(groupNum>0){
        imgNum = 6;
        document.getElementById("bar6").src="images/bar.jpg";
        document.getElementById("bar1").src="images/bar2.jpg";
    }else{
        groupNum=1;
        document.getElementById("bar1").src="images/bar.jpg";
        document.getElementById("bar6").src="images/bar2.jpg";

    }
    if(groupNum==2){
        document.getElementById("preview1").src="images/tanks3.jpg";
        document.getElementById("preview2").src="images/tanks4.jpg";
        document.getElementById("preview3").src="images/motors.jpg";
        document.getElementById("preview4").src="images/valve.jpeg";
        document.getElementById("preview5").src="images/motors2.jpeg";
        document.getElementById("preview6").src="images/field.jpg"; 
        document.getElementById("full").src="images/field.jpg";
    }
    else{
        document.getElementById("preview1").src="images/fence.png";
        document.getElementById("preview2").src="images/tanks1.jpeg";
        document.getElementById("preview3").src="images/tanks2.jpeg";
        document.getElementById("preview4").src="images/house1.jpeg";
        document.getElementById("preview5").src="images/house2.jpeg";
        document.getElementById("preview6").src="images/platform1.jpeg";
        document.getElementById("full").src="images/platform1.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";
}

</script>

image javascript

Edited 12 Years Ago by SolidSora

2 Contributors
2 Replies
208 Views
56 Minutes Discussion Span
Latest Post 12 Years Ago Latest Post by SolidSora

Traevel 216 Light Poster

12 Years Ago

Hi,

Correct me if I'm wrong but from what I understand the problem only occurs in showFullSize(), and not the nextPic() or prevPic() function. My first hunch would be a variable scope issue. You used the name imgNum for your global variable to keep track of the current image, but you also used it as a local variable in function showFullSize(imgNum). So when you update imgNum in the function showFullSize(imgNum) you are not updating the global variable imgNum but the local variable imgNum which only lasts while the function is running. Try changing it to something else.

function showFullSize(imageNumber){
    switch(imageNumber){

    //rest of the code

    }
}

That way when you have showFullSize() update imgNum there is no question as to which imgNum variable it's updating.

Traevel

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.

SolidSora 0 Light Poster · Answer 1 · 2012-08-06T17:25:22+00:00

Nevermind, I just resolved the problem by making a setImgNum function