Question

I’m using an array of images with next/previous functions to navigate through the images. I’d also like to have an unordered list of the individual images so users can click on a specific one, but I’m not sure how to implement it. I could link the images directly, but I’m not sure how to have them show up where the others do when next/previous is clicked.

Array:

var myImg= new Array()
  myImg[0]= "Home";
  myImg[1]= "Solutions";
  myImg[2]= "About";
  myImg[3]= "Careers";
  myImg[4]= "Contact";

myImgSrc = "images/";
myImgEnd = ".png"
var i = 0;

function loadImg(){
  document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

function prev(){
  if(i<1){
    var l = i
  } else {
    var l = i-=1;
  }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

function next(){
  if(i>3){
    var l = i
  } else {
    var l = i+=1;
  }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

window.onload=loadImg;

Markup:

<div id="top">
<div class="box">
<p class="l"><a href="#" onClick="prev();">&laquo; Previous Image</a></p>

<ul id="list">
<li><a href="#">Home</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>

<p class="r"><a href="#" onClick="next();">Next Image &raquo;</a></p>

<div class="clear"></div>
</div>
</div>

<div id="container">

<div id="image">
<img name="imgSrc" id="imgSrc" />
</div>

</div>

Answer 1

get the index of the clicked ‘anchor’s parent ‘li’ let it be indexOfLi , use jquery index() or write a javascript function to calculate index.

function goToImg(index){
    document.imgSrc.src = myImgSrc + myImg[indexOfLi] + myImgEnd;
    }

In jQuery, bind the click event

$(document).on('click','#list li a',function(){
    goToImg($(this).parent().index());
    return false; // to prevent default action
    });

Please have a look at binding events using javascript and using jQuery.

For on function to work, you have to use ~ jQuery 1.7.2

for earlier versions

$('#list li a').click(function(){
    goToImg($(this).parent().index());
    return false; // to prevent default action
    });