Example of jQuery Backstretch Slideshow

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);

Awesome. I added a fade transition:

var position = 0,
images = [
    '_img/main-1.jpg',
    '_img/main-2.jpg',
    '_img/main-3.jpg'
];

$.backstretch(images[position], {speed: 500});
setInterval(function() {
    if(position++ > images.length) position = 0;
    $('#backstretch img').animate({opacity: 'toggle'}, 1500, 'linear', function(){ $('#backstretch img').attr("src", images[position]).animate({opacity: 'toggle'}, 500, 'easeOutQuint') });
    $(window).trigger("resize");
}, 10000);

I just tried the first block of code and it worked fine, but when I tried the fading solution the image wouldn't cycle at all. Am I missing a simple error in that code?

Are the paths to the images correct? Do you get any error from console? :)

Thanks for responding! paths are correct..the sample without the fade works, but when I add the fade only the first image shows I tried proto-backstretch with the new fade call and that works, but I'd prefer your method

I ended up just using a combo of backstretch and supersized to make it work.

Sumogray.... The error this pushes back is:
Uncaught TypeError: Object # has no method 'easeOutQuint'

Any ideas? This is exactly what I need to do, so hoping you have an idea/answer.

Thanks.

I ended up combining a couple js files to make it work. Send me a PM and I can send the files to you.

…

On May 26, 2011 10:56 PM, "cjett" < ***@***.***> wrote: Sumogray.... The error this pushes back is: Uncaught TypeError: Object #<Object> has no method 'easeOutQuint' Any ideas? This is exactly what I need to do, so hoping you have an idea/answer. Thanks. ## Reply to this email directly or view it on GitHub: https://gist.github.com/545916

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.

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");
    });
});