jQuery slide show and image rotation issue

Question

I wrote a code to show images one at a time from my div. My code is working, but the problem is when last image is reached, then the next image would be the first image again. In my case the slide show stops at last image. Suppose my div has four images. When I test it then one images is showing at a time, but when last images is reached then the slide show is stopped. I mean the next image is not showing. Where the first image should show as the next image.

Here I am posting my full code. Someone please have a look and tell me what is the problem in the code and, if possible, then please rectify it.

my implementation url http://jsfiddle.net/tridip/jwxzv/

 $(document).ready(function () {
    slideShow();
});

function slideShow() {
    $('#gallery img').css({ opacity: 0.0 });
    $('#gallery img:first').css({ opacity: 1.0 });
    setInterval('gallery()', 2000);
}

function gallery() {
    var current = ($('#gallery .show') ? $('#gallery .show') : $('#gallery img').first());
    var next = (current.next().length > 0 ? current.next() : $('#gallery img').first());
    next.css({ opacity: 0.0 })
    .addClass('show')
    .animate({ opacity: 1.0 }, 1000);
    current.animate({ opacity: 0.0 }, 1000).removeClass('show');
}

<style type="text/css">

.clear {
clear:both
}

#gallery {
    position:relative;
    height:360px
}
#gallery img {
    float:left;
    position:absolute;
}

#gallery img {
    border:none;
}

#gallery show {
    z-index:500
}

 </style>

<div id="gallery">
<img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" class="show"  />
<img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" />
<img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" alt="" />
<img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" alt="" />
</div>

Answer 1

Problem Found. This line of code....

var next = ((current.next().length) ? ...

should be

var next = ((current.next().length > 0) ? ...

Working Example: http://jsfiddle.net/jwxzv/4/

---

In addition, your JS and CSS can be simplified a great deal, without worrying about the class show. This will also resolve your issue above.

Working Sample: http://jsfiddle.net/jwxzv/11/

CSS

.clear {
    clear:both
}
#gallery {
    position:relative;
    height:360px
}
#gallery img {
    float:left;
    position:absolute;
    display:none;
    border:none;    
    z-index:500
}

JS

$(document).ready(function () {
    slideShow();
});

function slideShow() {
    $('#gallery img').hide();
    $('#gallery img:first').fadeIn('fast')
    setInterval('gallery()', 2000);
}

function gallery() {
    var current = $('#gallery img:visible');
    var next = current.next('#gallery img');
    if (next.length==0) next = $('#gallery img:first')
    current.fadeOut('medium');
    next.fadeIn('medium');
}

Answer 2

Here is corrected code http://jsfiddle.net/jwxzv/3/