jQuery image index for a slideshow

Question

I've made a small slideshow script to cycle through a list of images. The problem with it is selecting the current index during the next() and prev() functions.

When viewing the slideshow, it performs one too many next()'s resulting in no image being shown for one slide. The index is too high. When click prev(), it seems to sit at 0 index (no image there) for a few clicks then kicks back in at 7.

Here's the jQuery code

jQuery('.slideshow').css({'position': 'relative', 'width': 240, 'height': 263}).find('img').css('display', 'none');
jQuery('.slideshow').find('img').eq(startingSlide).css('display', 'block');

jQuery('.slideshow span').click(function()
{
   if (jQuery(this).hasClass('span2'))
   {
      var currentSlide = jQuery('.slideshow img:visible').prevAll().length;

      jQuery('.slideshow').find('img').eq(currentSlide)
      .css('display', 'none').next('img').css('display', 'block').css({top: -300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce');
   }
   else
   {
      var currentSlide = jQuery('.slideshow img:visible').prevAll().length;

      jQuery('.slideshow').find('img').eq(currentSlide)
      .css('display', 'none').prev('img').css('display', 'block').css({top: 300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce');
   }
});

Any idea on how to fix the indexes?

Answer 1

I updated your code quite a bit, and it still needs some more refinement, but I didn't want to confuse the situation. If you have any questions on what this does, please ask. A little explanation follows the code block.

var $slideshow = jQuery('.slideshow'),
    $images    = $slideshow.find('img');

$slideshow.css({'position': 'relative', 'width': 240, 'height': 263});
$images.css('display','none').eq(startingSlide).css('display', 'block');

$slideshow.find('span').click(function()
{
   if (jQuery(this).hasClass('span2'))
   {
      var $currentSlide = $images.filter(':visible'),
          $nextSlide    = $currentSlide.next('img');

      if(!$nextSlide.length) $nextSlide = $images.filter(':first'));

      $currentSlide.css('display','none');
      $nextSlide.css({ display: 'block', top: -300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce');
   }
   else
   {
      var $currentSlide = $images.filter(':visible'),
          $prevSlide    = $currentSlide.prev('img');

      if(!$prevSlide.length) $prevSlide = $images.filter(':last');

      $currentSlide.css('display','none');
      $prevSlide.css({ display: 'block', top: 300, left: 0}).animate({top: 0, left: 0}, 2000, 'easeOutBounce');
   }
});

The important thing here is getting the .next('img') or .prev('img') and testing the length property of the result. If it equals 0 than it hit the end or the beginning, so be sure to select the opposite img to continue the slideshow.