CODEWITHSUNDEEP
jqueryhtml
aztekgold
aztekgold

Reputation: 63

How to get my background images to loop through

I am trying to loop through background images every few seconds using jquery fadeIn here is my HTML

<div class="bg" style="background: url(images/header1.jpg);"> </div>
<div class="bg" style="background: url(images/header2.jpg);"> </div>
<div class="bg" style="background: url(images/header3.jpg);"> </div>

and here is my Jquery

function changeBackground () {
    $(".bg").first().fadeIn("slow", function showNext() {
        $(this).next("div").delay(1000).fadeIn("slow", showNext);
    });
}

$(document).ready(function() {
    setTimeout(changeBackground, 0);        
});

I'm not sure how to hide the previous image so I can reintroduce it next time. The function loops or maybe could be done using z-index to bring images to top?

Upvotes: 1

Views: 5483

Answers (5)

SpYk3HH
SpYk3HH

Reputation: 22570

I found it! I answered a question Very similar to this one here

Ok, the way i've done this is a little different from your layout. Though you could probably adjust it if you don't like my layout. I chose this layout because it seemed optimal.

I made a parent div that stretches for the background (also, you could set it to any size, place it anywhere, etc...). Next I put three img tags inside it with their respective links (replace links with your own).

Next comes a little CSS. You'll note I hide all images to start with and then set the first image to display: block, thus making it visible. The other key here is to set the images height and width to 100% so they stretch to parent.

Finally, just a little easy JS. Write it how you want it. In my example I simply grab currently visible, then look for what's next. If their are no images next, then I go back to the first one!

jsFiddle Example

jsFiddle [Modded using your jQuery style of code]

jsFiddle [Modded Example using your HTML Layout as well]

Below is example code from my original layout and style

HTML

<div id="myBackground">
    <img src="http://jsfiddle.net/img/initializing.png" />
    <img src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/bg.png" />
    <img src="http://cdn.buuteeq.com/upload/4074/header3.jpg.1140x481_default.jpg" />
</div>

CSS

#myBackground {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}
#myBackground img {
    display: none;
    height: 100%;
    /* this will remove "white flash" between fade */
    position: absolute;
    width: 100%;
}
#myBackground img:first-child {
    display: block;
}

JS

function changeBackground() {
    //    here i select the current one visible,
    //    then i check if there is another omage after it, else i go back to the first
    var cur = $("#myBackground img:visible"),
        nxt = cur.next().length ? cur.next() : $("#myBackground img:first");
    cur.fadeOut("slow");
    nxt.fadeIn(1500);
}

$(function() {    //    starts when page is loaded and ready
    setInterval(changeBackground, 2250);    //    2 second timer
})

Upvotes: 1

brbcoding
brbcoding

Reputation: 13586

Okay, so I know this is a JQuery question, but I just wanted to give you another option. This type of effect can be achieved with just one div and some keyframes.

HTML

<div class="bg"></div>

CSS

.bg {
  height: 500px;
  width: 500px;
  -webkit-animation: change-bg 10s ease infinite;
  animation: change-bg 10s ease infinite;

}

@-webkit-keyframes change-bg{
  0%  { background-image: url(http://lorempixel.com/500/500); }
  50% { background-image:  url(http://lorempixel.com/501/501);  }
  100% { background-image: url(http://lorempixel.com/503/503); }
}

@keyframes change-bg {
  0%  { background-image: url(http://lorempixel.com/500/500); }
  50% { background-image:  url(http://lorempixel.com/501/501);  }
  100% { background-image: url(http://lorempixel.com/503/503); }
}

/* add the other vendor prefixes if needed. */

Oh and also, if you wanted it to be a fullscreen background, you could use 0 divs. Just the keyframes and the rest of the css.

CSS

body {
  background: no-repeat center center fixed;
  height: 100%;
  width: 100%;
  -webkit-animation: change-bg 10s ease infinite;
  animation: change-bg 10s ease infinite;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@-webkit-keyframes change-bg{
  0%  { background-image: url('http://lorempixel.com/500/500'); }
  50% { background-image:  url('http://lorempixel.com/501/501');  }
  100% { background-image: url('http://lorempixel.com/503/503'); }
}

@keyframes change-bg {
  0%  { background-image: url('http://lorempixel.com/500/500'); }
  50% { background-image:  url('http://lorempixel.com/501/501');  }
  100% { background-image: url('http://lorempixel.com/503/503'); }
}

/* add the other vendor prefixes if needed. */

Fullscreen BG Demo

Div Demo

Upvotes: 3

Spokey
Spokey

Reputation: 10994

function changeBackground() {
    $(".bg").first().fadeIn("slow", function showNext() {
        var next = $(this).next('div').length ? $(this).next('div') : $(".bg").first();
        $(this).siblings().fadeOut('slow').delay(1000);
        next.fadeIn("slow", showNext);
    });
}


$(document).ready(function () {
    setTimeout(changeBackground, 100);
});

FIDDLE

Upvotes: 5

JayKlassen
JayKlassen

Reputation: 32

Visit http://www.javascriptkit.com/howto/show2.shtml It explains everything for a slideshow in javascript I used css and html5 my self. I go to http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/ for that.

Upvotes: 0

JcKelley
JcKelley

Reputation: 1984

A fantastic plugin for background image slideshows is Vegas. It is extremely easy to set-up and use. I know this doesn't directly answer your question, but hopefully it will make coding easier for you.

Upvotes: 2

Related Questions