Question

Right now I have a image gallery that changes images when a user clicking on a thumbnail image the appropriate div’s style changes to block and the rest are hidden. I want to be able to add next/previous buttons for additional navigation.

My thought was to use getElementByAttribute to find the only image with the ‘style=”display:block”‘, and then somehow add/subtract one to the div. But I am afraid I’m at a loss. Any advice?

Current code:

<div id="image1" style="display:block"><img src="resources/images/larges/01.jpg"></div>
<div id="image2" style="display:none"><img src="resources/images/larges/02.jpg"></div>
. . .

<img style='cursor:pointer;' onclick="showDiv(1)" src="resources/images/thumbs/01.jpg">
<img style='cursor:pointer;' onclick="showDiv(2)" src="resources/images/thumbs/02.jpg">
. . .

<script type = "text/javascript">       
   function showDiv(which) {
    for(i = 0; i < 13; i++) {
       document.getElementById("image"+i).style.display="none";
    }
       document.getElementById("image" + which).style.display = "block";
    }   
</script>

Answer 1

you can declare a global variable

var currentImage = 1; //assuming the 1st image shown is always the first

then, you add two buttons,

<button type="button" onclick="showDiv(currentImage - 1)">Previous</button>
<button type="button" onclick="showDiv(currentImage + 1)">Next</button>

on your function you update the currentImage with the given param

function showDiv(which) {
   for(i = 0; i < 13; i++) {
      document.getElementById("image"+i).style.display="none";
   }
   //in the next 2 lines, you make sure which isn't lower than 1, and isn't greater than the number of images
   if(which < 1) which = 1;
   if(which > 13) which = 13;
   document.getElementById("image" + which).style.display = "block";
   currentImage = which;
}