title: jquery find next image after the clicked instance
body: <p>I'm trying to set up an image gallery where you can click a thumb and from that you can then use next and prev buttons. My issue is the user can initially click any image which I need to detect and the workout which the next or previous image will be and replace the display src with the src of the next image. I'm only trying to get the next button working first as the previous will work on the same principle. I have been trying to use the .next() but its really got me baffled. </p>
  
  <p>Any help with this would be great.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/c9Jkv/23/" rel="nofollow">jsfiddle</a> of what I have and below is the jquery I've written, the problem is the bottom bit for the next button:</p>
  
  <pre><code>var numImgs = $('div.locationGallery .polaroidImage').length;
  var prevImages = $('.polaroidImage').prevAll().length;
  var thisImage;
  var imageClicked;
  var nextImage;
  var nextImage;
  
  $('.polaroidImage').click(function(){
      var prevImages = $(this.parentNode).prevAll().find('.polaroidImage').length;
      if(prevImages &gt; 0){
          $('.prev').show();
      }else{
          $('.prev').hide();
      }
      if(prevImages == (numImgs - 1)){
          $('.next').hide();
      }else{
          $('.next').show();
      }
  });
  
  $(".thumb").click(function(){
        imageClicked = '';
        imageClicked = $(this).attr('src');
      $(".imageDisplay").find('img').remove();
      $(".imageDisplay").append("&lt;img src='"+imageClicked+"' /&gt;")
  });
  
  $('.next').click(function(){
      nextImage = $('.imageContainer').next('img').attr('src');
      alert(nextImage);
  });
  </code></pre>