Help needed - Random image fade grid
Hi all - I'm new to jQuery (and javascript) but feel that in the past week or two I'm starting to pick things up quickly.
With a bit of luck hopefully someone might be able to help with my current conundrum;
I'm trying to use jQuery to produce something similar to this flash example http://steftock.com/dev/example/index.html although I'd like the effect to be somewhat more controlled.
In a nutshell, what I'm trying to achieve is a 3 x 4 grid of (12) images which appears to load in a random order and then 1 by 1 (again in random order) fade out to be replaced by another image. I'd like the effect to be quite subtle, smooth and calming with the timing between image fades to be fairly even.
All images would be pulled from a folder on my webserver. I don't want the same image to be visible more than once at any time, although I don't mind repeating images as long as they're not already in the grid - hopefully that makes sense?
Ideally I'd like only one image to be changing at any given time with a pause before the next image starts to fade into new image.
The way I've been trying to tackle this so far is to use 12 different instances of a jquery image fade laid out in a CSS grid.
There are a few problems with my approach so far;
• Doesn't appear random
• Timing - multiple squares change at same time. (I only want one image to change at a time)
• Same image often repeated at same time within grid
• Its not long before a pattern emerges and you can tell which image will change next.
I'm sure this must be possibly, but my math or scripting skills aren't quite there yet.
If anyone could help or point me in the right direction I'd be eternally grateful!
Thanks
Stef
With a bit of luck hopefully someone might be able to help with my current conundrum;
I'm trying to use jQuery to produce something similar to this flash example http://steftock.com/dev/example/index.html although I'd like the effect to be somewhat more controlled.
In a nutshell, what I'm trying to achieve is a 3 x 4 grid of (12) images which appears to load in a random order and then 1 by 1 (again in random order) fade out to be replaced by another image. I'd like the effect to be quite subtle, smooth and calming with the timing between image fades to be fairly even.
All images would be pulled from a folder on my webserver. I don't want the same image to be visible more than once at any time, although I don't mind repeating images as long as they're not already in the grid - hopefully that makes sense?
Ideally I'd like only one image to be changing at any given time with a pause before the next image starts to fade into new image.
The way I've been trying to tackle this so far is to use 12 different instances of a jquery image fade laid out in a CSS grid.
There are a few problems with my approach so far;
• Doesn't appear random
• Timing - multiple squares change at same time. (I only want one image to change at a time)
• Same image often repeated at same time within grid
• Its not long before a pattern emerges and you can tell which image will change next.
I'm sure this must be possibly, but my math or scripting skills aren't quite there yet.
If anyone could help or point me in the right direction I'd be eternally grateful!
Thanks
Stef