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.

either my pictures dont change and/or fade or all three pictures appear instead of just one plus they also dont change. — Jordan Ryan
– Jordan Ryan, Commented May 8, 2014 at 5:56
It kind of sounds you don't linked the jQuery library correctly.. Where did you put the code to reference jQuery and how? Also, do you have the site online? It would be much easier to help if we got a bigger picture of what's going on. If not, try putting relevant code in a jsFiddle (jsfiddle.net) and link to it. — display-name-is-missing
– display-name-is-missing, Commented May 8, 2014 at 10:39
you were right! i was missing the .js on the query library links! GOD so stupid! thank you for that didnt even consider that thought it was related to my use of id instead of class!! THANK YOU. — Jordan Ryan
– Jordan Ryan, Commented May 9, 2014 at 4:43

tyler5819 · Accepted Answer · 2014-05-08 02:16:40Z

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

answered May 8, 2014 at 2:16

tyler5819

581 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jordan Ryan Over a year ago

this also worked just a question why would you use .image (eg a class) instead of #image (eg an id)?

Collectives™ on Stack Overflow

fading images simple slideshow javascript/html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related