Loop through images

css, html, jquery

Solution

You can try this.

$(document).ready(function() {
    var _intervalId;

    function fadeInLastImg()
    {
        var backImg = $('.container img:first');
        backImg.hide();
        $('.container' ).append( backImg );
        backImg.fadeIn()
    };

    _intervalId = setInterval( function() 
    {
        fadeInLastImg();
    }, 1000 );

});​

Here is the jsFiddle http://jsfiddle.net/KQ3wu/128/

Problem

I know this is around a lot, but I just can't get it to work :/ ``` <div class='container'> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> </div> ``` So I have 2 images, which with the below CSS are fixed to the full size of the browser window: ``` <style type="text/css"> .container { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } .container img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; } </style> ``` Currently, it just shows the last image (2) to appear at full size. However, I want to use some jQuery to show the first one, then after X seconds, fade out number 1 and loop through fading in each image. I assume it would be best to use setInterval, then fadeOut and then fadeIn images, but whatever I do doesn't work. I was trying to go down this line: ``` <script type="text/javascript"> $(document).ready(function() { $('.container').children('img').each(function(i) { $(this).fadeOut(); }); }); </script> ```

Original source