Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing background indefinitely with jQuery and setTimeout

    Hello people,

    I have a site http://insearchofsound.com/index.php

    and I would like to change the background indefinitely every 10 seconds.

    Here's the code
    Code:
    $(document).ready(function() {
        //image index
        var ii = 0;
        
        //timer
        var t;
        
        //list of images
        var imgs = ["bg1.jpg","bg2.jpg","bg3.jpg"];
        
        loopBG(imgs,ii);
        
    });
    
    function loopBG(imgs,ii) {
            $("pagewrapper").css("background-image","url(backgrounds/" + imgs[ii] + ")");
            ii++;
    
            if (ii == imgs.length) {
                ii = 0;
            }
            
            t = setTimeout(loopBG(imgs,ii), 10000);
            
    }
    Two problems with this code: first, the backgrounds don't change at 10 second intervals (they don't change at all) and second, I get the "too many iterations" error after a few seconds.

    Any solutions?

    Many thanks

    Shmoyko

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I've been using the jQuery plugin "timers", and it does the job perfectly. I leave a page up and running for days on end which refreshes the database via ajax every 5 seconds.

    http://jquery.offput.ca/timers/

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Brilliant! Thank you very much.

    Now, how would I reset the counter "i" after I reach the end of my image array?

    Cheers,

    Shmoyko

    Code:
    $(function() {
    
    //list of images
    var imgs = ["bg1.jpg","bg2.jpg","bg3.jpg"];
                    
    $("#pagewrapper").everyTime(10000,function(i) {
                        if (i == imgs.length) {
                            i = 0;
                        }
                        
                        $(this).css("background-image","url(uploads/images/site_images/backgrounds/" + imgs[i] + ")");
    });
    
    });

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I would calculate the modulus of i (by dividing the number of elements in the array by i) and use the result as your array index.

    I didn't test this but see if it works for you:

    Code:
    $(function() {
    
    //list of images
    var imgs = ["bg1.jpg","bg2.jpg","bg3.jpg"];
                    
    $("#pagewrapper").everyTime(10000,function(i) {
        var mod = imgs.length % i;
        $(this).css("background-image","url(uploads/images/site_images/backgrounds/" + imgs[mod] + ")");
    });
    
    });

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Good stuff.

    The modulus approach works with a slight modification:

    Code:
    $("#pagewrapper").everyTime(2000,function(i) {
        
        var mod = (i < imgs.length)? imgs.length % i : i % imgs.length;
                        
        $(this).css("background-image","url(uploads/images/site_images/backgrounds/" + imgs[mod] + ")");
    
    });

  • #6
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Oops, yeah, i % imgs.length is what I meant You really don't need to do anything different when i < imgs.length, it'll work for that range as well. I just goofed on the part that really matters! But glad you caught my intent and figured it out.

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That works too

    Just being cheeky here: would you know how to fade the background images in and out, or even cross-fade them?

    Many thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •