Showing images in chain one after one issue
<p>My div has many images like</p>

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

<p>I want to show one image at a time and after some time another images will be shown but my jQuery code is not working. What is the problem</p>

<pre><code>$(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 img.show') ? $('#gallery img.show') : $('#gallery img').first());
    var next = current.next().length &gt; 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');
}
</code></pre>

<p>Can anyone please rectify my code. Thanks</p>
