Question

I am having some really weird issues when incrementing to the next list item to output the next href and then changing the image src with that value

It traces out and makes it to the next item then it de increments if I keep clicking the next arrow??? Below is all my code, so its nothing else that could cause the issue other then what I wrote is incorrect.

The concept is the same as a lightbox. I will also have previous arrow.

HTML:

<div role="main" id="main">
<div id="boxes">
  <ul>
         <li><a href="img/lrgimgs/1.jpg" class="lightbox"><img src="img/thumbs/1.jpg"></a></li>
         <li><a href="img/lrgimgs/2.jpg" class="lightbox"><img src="img/thumbs/2.jpg"></a></li>
         <li><a href="img/lrgimgs/3.jpg" class="lightbox"><img src="img/thumbs/3.jpg"></a></li>
         <li><a href="img/lrgimgs/4.jpg" class="lightbox"><img src="img/thumbs/4.jpg"></a></li>

   </ul>
 </div>
  <div class="nextArrow>next</div>
  <div class="previousArrow>previous</div>
</div>

JQUERY:

 var incrementVar = 0;

 $(".nextArrow").click(function() {
        incrementVar++;
        var hrefa=$('#main').find('#boxes ul li a:eq(' + incrementVar + ')').attr('href');
        $("#thumbnail").attr('src', hrefa); //I am loading the outcome of my hrefa var into another div

 });

Answer 1

Here’s a working fiddle: http://jsfiddle.net/Mq3wF/

HTML:

<div role="main" id="main">
<div id="boxes">
  <ul>
         <li><a href="img/lrgimgs/1.jpg" class="lightbox"><img src="img/thumbs/1.jpg"></a></li>
         <li><a href="img/lrgimgs/2.jpg" class="lightbox"><img src="img/thumbs/2.jpg"></a></li>
         <li><a href="img/lrgimgs/3.jpg" class="lightbox"><img src="img/thumbs/3.jpg"></a></li>
         <li><a href="img/lrgimgs/4.jpg" class="lightbox"><img src="img/thumbs/4.jpg"></a></li>

   </ul>
 </div>
  <div class="nextArrow">next</div>
  <div class="previousArrow>previous</div>
</div>​​​​​​

Javascript:

var i = 0;
var hrefa;
$(".nextArrow").click(function() {
     hrefa = $("li").find("a").eq(i).attr("href");
     i++;
    alert(hrefa);
 });​