Skip to content

Instantly share code, notes, and snippets.

@srobbin
Created August 23, 2010 17:24
Show Gist options
  • Save srobbin/545916 to your computer and use it in GitHub Desktop.
Save srobbin/545916 to your computer and use it in GitHub Desktop.
var position = 0,
images = [
'image1.jpg',
'image2.jpg',
'image3.jpg'
];
$.backstretch(images[position]);
setInterval(function() {
if(position++ > images.length) position = 0;
$("#backstretch img").attr("src", images[position]);
$(window).trigger("resize");
}, 5000);
@strillogy
Copy link

strillogy commented May 27, 2011 via email

@grahammorley
Copy link

Sorry for delay, should have said you will need to run a jquery easing plugin for easeOutQuint... have replaced with linear which is included afaik.

Sorry guys.

@R3dDevil
Copy link

Hello guys i'm new here and i just HAD to post my working solution.

You will be needing http://plugins.jquery.com/project/timers too.

var position = 0,
images = [
    'images/slide1.jpg',
    'images/slide2.jpg',
    'images/slide3.jpg'
];

$.backstretch(images[position]);

$("body").oneTime(4000,function() {
    position++;
    $('#backstretch img').fadeOut(1000, function(){$('#backstretch img').attr("src", images[position]).fadeIn(1000)});
    $(window).trigger("resize");

    $("body").everyTime(5200,function() {
        position++;
        if(position == images.length){
            position = 0;
        }
        $('#backstretch img').fadeOut(1000, function(){$('#backstretch img').attr("src", images[position]).fadeIn(1000)});
        $(window).trigger("resize");
    });
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment