Increment list item value to retrieve next href to change image source

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

 });

Sorry I meant `$('#boxes a").next();` which will increment through the `a` elements inside of `
` — Alex W, Aug 02 '12 at 14:36
Doenst work either :( var hrefa = $('#boxes li a').next().attr('href'); $("#thumbnail").attr('src', hrefa) — user992731, Aug 02 '12 at 14:40
What happens if you log the `.length` of the hrefa selector like so: `console.log($('#main').find('#boxes ul li a:eq(' + incrementVar + ')').length)`? Should be 1, but if it is 0, then you just have an error in the selector. Adjust, try again, and repeat. — dgvid, Aug 02 '12 at 14:58
Ok, I am an moron, I was calling an init function twice in a header.php file..Thanks guys everyones answer was correct. I'm an idiot — user992731, Aug 02 '12 at 15:10

score 1 · Accepted Answer · answered Aug 02 '12 at 15:02

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);
 });

Thanks Alex! I had a function call in my header.php file that I missed which was causing all the havoc. Got it sorted out :) Thanks again!! — user992731, Aug 02 '12 at 15:35

Increment list item value to retrieve next href to change image source

1 Answers1