CODEWITHSUNDEEP
jquerycssbackground-image
Fo Nko
Fo Nko

Reputation: 634

change background image jquery

so im trying to rotate background image from a set of three images i have. I figured out a way to do this but something strage is going on here. From the example below you should get i= 0, 1 and 2 but still is reaching value 3!! and newBg[3] is undefined! so it stays 10 seconds SHOWING NOTHING

you can find a working example here: http://www.goesenlinea.com/agus/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if IE ]>
    <link href="css/bootstrap.min.ie.css" rel="stylesheet">
    <![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jqueryBg.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <style>
        body { 
            background: url('img/fond1.png') no-repeat center center fixed;
            background-color: black;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            -webkit-transition: 2s;
            -moz-transition: 2s;
            -ms-transition: 2s;
            -o-transition: 2s;
            transition: 2s;

        } 
        .blackbox {
            /*border-top: 1px solid #2b2b2b;*/
            border-left: 1px solid #2b2b2b;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            background: url('img/boxes_background_color_1x1.png') repeat transparent;
        }

    </style>
    <script>
        var newBg = ['img/fond1.png', 'img/fond2.png', 'img/fond3.png'];
        var i = 0;
        var rotateBg = setInterval(function(){
            if(i==3)
                i=0;
            else
                i++;
            $('body').css({backgroundImage : 'url(' + newBg[i] + ')'});
        }, 10000);
    </script>
</head>

<body>
    <div class="container-fluid" >

        <div class="row-fluid">
            <div class="span2">
                <!-- espaciador izquierda -->
            </div>
            <div class="span8 blackbox">
                <div class="span12" >
                    <img src="img/logo glx.png" />
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="navbar navbar-inverse">
                                <div class="navbar-inner">
                                    <div class="container">

                                        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </a>

                                        <!-- Be sure to leave the brand out there if you want it shown -->
                                        <a class="brand" href="#">Project name</a>

                                        <!-- Everything you want hidden at 940px or less, place within here -->
                                        <div class="nav-collapse collapse">
                                            asdfasdfad
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div> 
            </div>
            <div class="span2">
                <!-- espaciador derecha -->
            </div>
        </div>
    </div>


</body>

Upvotes: 0

Views: 9538

Answers (2)

Bill
Bill

Reputation: 3517

what @tcovo said.

Except I would do it like this:

i++;
if ( i > 2 ){
    i = 0;
}
$('body').css({backgroundImage : 'url(' + newBg[i] + ')'});

Upvotes: 2

tcovo
tcovo

Reputation: 7740

    if(i==3)
        i=0;
    else
        i++;
    $('body').css({backgroundImage : 'url(' + newBg[i] + ')'});

What happens if i is equal to 2 when this code is executed? It gets incremented to 3, and then it gets used in newBg[i], which causes the unwanted access of newBg[3]. You could fix it by replacing the if-else with i = (i+1) % 3; (the % used here is called the modulo operator).

Upvotes: 4

Related Questions