Loop through images

Question

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>

Answer 1

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/

Answer 2

jsBin demo

Just modified the Fademe jQuery plugin to remove the mouseover cause you use full screen images :):

(function($){
    $.fn.fademe = function(F,P,S){
        F=F||700;
        P=P||3000;
        S=S-1||0;       
        var e=this.children(), T;
        function a(){ e.eq(S=++S%e.length).fadeTo(F,1).siblings(e).stop(1).fadeTo(F,0); }
        e.eq(S).show().siblings(e).hide();
        function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();
    };
})(jQuery);



// USE PLUGIN:
$(function(){    
  $('.container').fademe();  
});