fading images simple slideshow javascript/html

Question

I am extremely new to javascript and im trying to use fade out/fade in photo slide show and i am trying to use a code i have seen else where but it just doesnt seem to be working can someone have a look and just point out where i might be going wrong.

HTML

<div id="media" >
    <img src="test1.jpg" />
    <img src="test2.jpg"/>
    <img src="test3.jpg" />
</div>

css

#media
{
    border-style:groove;
    border-width:5px;
    border-color:green;
    background-color:purple;
    height:34%;
    width:30%;
    margin-top:40px;
    margin-right:5%;
    margin-bottom:50px;
    margin-left:5%;
    float:left;
}
 #media img
{
    width:100%;
    height:100%;
}

script

     $('#media img:gt(0)').hide();
        setInterval(function () {
            $('#media :first-child').fadeOut(4000)
                                 .next('img')
                         .fadeIn(10)
                         .end()
                         .appendTo('#media');
        }, 4000); // 4 seconds
    </script>

any help would be great.

thank you for any help.

Answer 1

Using jQuery you could accomplish this. Maybe something like:

$(function() {
    var images = $(".images img").hide();
    var current = 0;
    setInterval(function() {
        var next = ((current + 1) % images.length);
        images.eq(current).fadeOut();
        images.eq(next).fadeIn();
        current = next;
    });
});

However, in your CSS page you'd also want to add:

.images
{
    position: relative;
}
.images img
{
    display: none;
    position: absolute;
}

This is great if you want some to fade into others?

Check out this page, has some other concepts very similar using jQuery: http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm