Question

I’m looking to develop or use an existing jQuery slideshow.

The characterization of the slide show is as followed

There will be 5 boxes that will use the same image pool and rotate the images on the boxes individually without displaying the same image on 2 or more boxes at the same time.

It will look something like this :

Each box will display the rotating (fade) images.

How is it possible to achieve this effect? Do you know of any existing plugin that creates it?

Thanks

Answer 1

jsBin demo

Using the fademe jQuery plugin:

HTML:

<div class="boxes"></div>

CSS:

.box{
  width:100px;
  height:100px;
  border:4px solid #000;
  margin:5px;
  float:left;
}
.box img{
  position:absolute;
}

jQuery:

// IMAGES ARRAY:
images = [
  'http://placehold.it/100x100/cf5&text=1',
  'http://placehold.it/100x100/adf&text=2',
  'http://placehold.it/100x100/468&text=3',
  'http://placehold.it/100x100/953&text=4',
  'http://placehold.it/100x100/583&text=5',
  'http://placehold.it/100x100/f27&text=6',
  'http://placehold.it/100x100/48f&text=7'
];

// GENERATE BOXES
for(i=0;i<5;i++){
 $('.boxes').append('<div class="box"/>');
}

// APPEND ALL IMAGES TO EACH BOX
for(i=0;i<images.length;i++){
 $('.box').append('<img src="'+ images[i] +'" />');
}

// APPLY fademe plugin TO EACH BOX
for(i=0;i<5;i++){
 $('.box').eq(i).fademe(0,0,i+1);  // the 3rd value is the 'S' ooption (starting slide number)
}