Question

I have a php array that gets returned from a database, the array contains paths to images that I want o make up the background of my wrapper div in my HTML, I want to be able to add some javascript that will cycle through the array and a set interval show the next image in the array, is this possible, and is it possible to also have some control over it so the user can skip back, forward and also stop the slidshow.

Answer 1

I’ve actually applied the jQuery Cycle plugin to do almost exactly what you’re asking. It’s a great and versatile plugin.

I’m also pulling images out of an array to add to the page. The plugin grabs the images, hides what it doesn’t need and cycles through them.

Update Just noticed you want the user to have control to move back and forth. Cycle does this as well. Have a look at the pager example.

---

Re: Background Image Comment

You just have to get a little creative. I’m not sure of a jQuery plugin that will fade a background image. I’m not sure that’s possible (if it is I’d love to see it). What I did instead is to absolutely position an element with a fixed size that acts as your container, matches the size of your background image and holds the cycle elements (which are positioned relatively inside). Add your page content by adding another absolutely positioned element right on top of the other one.

Styles:

#cycle, #content {
  position:absolute;
  top:0;
  left:50%; 
  width:800px;
  height:600px;
  margin-left:-400px; //middle of page
  z-index:1;
}

#content {
  z-index:100;
}

Javascript:

$('#cycle') 
.after('<div id="nav">') //needs some position styling
.cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav' 
});

html:

<div id="cycle">
  <img src="path/to/image1.jpg" />
  <img src="path/to/image2.jpg" />
</div>
<div id="content">Hello World!</div>