showing images in chain one after one issue
my div has many images like

    <div id="gallery">
	<img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" />
	<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>

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

    $(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').get(0));
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ?    $('#gallery img').get(0) : current.next()) : $('#gallery img').get(0));
     next.css({ opacity: 0.0 })
    .addClass('show')
    .animate({ opacity: 1.0 }, 1000);
     current.animate({ opacity: 0.0 }, 1000).removeClass('show');
     }

can anyone plzz rectify my code. thanks
showing images in chain one after one issue
===

my div has many images like

    <div id="gallery">
	<img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" />
	<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>

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

    $(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').get(0));
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ?    $('#gallery img').get(0) : current.next()) : $('#gallery img').get(0));
     next.css({ opacity: 0.0 })
    .addClass('show')
    .animate({ opacity: 1.0 }, 1000);
     current.animate({ opacity: 0.0 }, 1000).removeClass('show');
     }

can anyone plzz rectify my code. thanks