Skip to main content

Forums

This topic contains 18 replies, has 11 voices, and was last updated by  hhalter 3 weeks, 6 days ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #39298

    intodesign
    Participant

    Hey All,

    I would like to Change the Body Background Every 10 sec and i have already something that does that…
    but it’s not working at all the monitors (i guess not the wide-screen) and what i have also it’s kinda heavy

    I just need a simple jquery code or something simpler to change the background image every 10 sec

    #130786

    intodesign
    Participant

    what does it had to do with what i’m asking?

    i want like a slideshow of the body, i want that every 10 seconds the body of the css will load a different image

    body { background: url(image1.jpg); }
    body { background: url(image2.jpg); }

    first load image1.jpg… then after 10 seconds load image2.jpg, simple

    anyone can direct me ?

    #130807

    Adam Hodgson
    Participant

    There are also a number of Jquery plugins such as [This](http://buildinternet.com/project/supersized/ “”) which you can use, from here you can control the duration an image takes to carousel (10 seconds..)

    This what you were after?

    #130808

    CrocoDillon
    Participant

    $(function() {
    var body = $(‘body’);
    var backgrounds = new Array(
    ‘url(image1.jpg)’,
    ‘url(image2.jpg)’
    );
    var current = 0;

    function nextBackground() {
    body.css(
    ‘background’,
    backgrounds[current = ++current % backgrounds.length]
    );

    setTimeout(nextBackground, 10000);
    }
    setTimeout(nextBackground, 10000);
    body.css(‘background’, backgrounds[0]);
    });

    You don’t need to set the initial background in css, that’s what the last line is there for. That way you can keep all the backgrounds together, easier to maintain. :) You are not limited to background images, you can add colors and gradients to the array too.

    #130811

    Hugo Giraudel
    Participant

    Change body’s ID/Class every 10 seconds. Each class/ID maps a specific background.

    I guess JS will be lighter than if you try to change the background dynamically.

    Quick example: http://jsfiddle.net/xdUBZ/1/

    #130833

    intodesign
    Participant

    @AdamHodgson – I’m using already ‘supersized’ but it doesn’t support all the monitors, if you having a widescreen probably you’ll see it good in all browsers, but old monitors it doesn’t do the stretch, but it’s not the issue , this plugin is too heavy for what i’m asking for.

    @CrocoDillon – Your code looks like something that i really need, but can you help me a little? i’ve tried to do that and i see nothing,
    i put the images in the same folder , how do the markup should look like?

    #130864

    CrocoDillon
    Participant

    Did you include jQuery? No special markup or css needed with that script.

    #130894

    intodesign
    Participant

    it has error on the second line that you wrote,
    can you check it please?

    #130896

    intodesign
    Participant

    Sorry, it’s working.. thanks!

    #180648

    Alesh
    Participant

    Hugo Giraudel, great. work….
    is it possible to change pictures with fade effect? If so…..this functions has no mistake! Can you help me please?

    #180649

    Paulie_D
    Moderator
    #180650

    Alesh
    Participant

    yes…thx a lot…but it´s not behave as picture in body…:(

    #180653

    Paulie_D
    Moderator

    but it´s not behave as picture in body

    Unfortunately, that’s not very clear.

    Perhaps you should start a new thread (this one is quite old) with more specific details of what you are trying to do.

    #272511

    Punyah
    Participant

    @CrocoDillon I just tried doing as below

    I have kept images and all the in the same folder but it is not working for me just the plain screen is displaying

    Script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    $(function() {
    var body = $(‘body’);
    var backgrounds = new Array(
    ‘url(image1.jpeg)’,
    ‘url(image2.jpeg)’,
    ‘url(image3.jpeg)’
    );
    var current = 0;
    function nextBackground() {
    body.css(
    ‘background’,
    backgrounds[current = ++current % backgrounds.length]
    );
    
    setTimeout(nextBackground, 10000);
    }
    setTimeout(nextBackground, 10000);
    body.css(‘background’, backgrounds[0]);
    });
    </Script>
    </head>
    <body id="body">
    </body>
    <footer></footer>
    
    #272525

    CrocoDillon
    Participant

    @punyah maybe you need two script tags, one to include jQuery and one for the script. Not sure if it’s going to work your way. Old thread by the way o_0

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star