/    Sign up×
Community /Pin to ProfileBookmark

Randomising Image Crossfader

Copy linkTweet thisAlerts:
Dec 28.2007

Hi,
I have an image crossfader running on a website at present ([url]www.seriousaboutsport.co.uk[/url]) that references a seperate js file in the <head> and includes similar script to that below in the body:-

[FONT=”Courier New”]<div id=”cf_wrapper”>
<div class=”cf_element” id=”cf1″><img src=”sideimage_football01.jpg” width=”190″ height=”460″ alt=”Football Image” /></div>
<div class=”cf_element” id=”cf2″><img src=”sideimage_rugby01.jpg” width=”190″ height=”460″ alt=”Rugby Image” /></div>
<div class=”cf_element” id=”cf3″><img src=”sideimage_tennis01.jpg” width=”190″ height=”460″ alt=”Tennis Image” /></div>
<div class=”cf_element” id=”cf4″><img src=”sideimage_cricket01.jpg” width=”190″ height=”460″ alt=”Cricket Image” /></div>
</div>
<img src=”spacer.gif” width=”190″ height=”470″ alt=”” />
<script type=”text/javascript”>
var cf = new Crossfader( new Array(‘cf1′,’cf2′,’cf3′,’cf4’), 2000, 4000 );
</script>[/FONT]

As you will no doubt see the final script identifies which images to use (cf1,2,3 etc. What I am looking to do is to randomise this array so that each time the page is refreshed the array ‘cf1′,’cf2′,’cf3’ etc is in a different order.

The problem that I ma having is that of creating this random array that includes “‘s” and inputting it into a current javascript tag (i.e. nesting <script type=”text/javascript”> within <script type=”text/javascript”>).

Any help much appreciated.
Chris

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@EndangeredMassaDec 28.2007 — You could do something like the following:

[CODE]<script type="text/javascript">
function fisherYates ( myArray ) {
var i = myArray.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = myArray[i];
var tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}


var randomArray= new Array('cf1','cf2','cf3','cf4');

fisherYates(randomArray);

var cf = new Crossfader(randomArray, 2000, 4000 );
</script>[/CODE]

It uses the Fisher-Yates shuffle algorithm to randomize the items in the array. See http://sedition.com/perl/javascript-fy.html for reference.
Copy linkTweet thisAlerts:
@Arty_EffemDec 28.2007 — You could do something like the following:

........

It uses the Fisher-Yates shuffle algorithm to randomize the items in the array. [/QUOTE]
I'm surprised anyone would put their name to such a simple method, which is weak because it doesn't prevent elements being swapped with themselves, and why use two temporary variables?
[CODE]
Array.prototype.shuffle=function()
{
for(var i=0, j, tempHold, len=this.length; i<len; i++)
{
while( (j=Math.floor(Math.random()*len))==i )
;
tempHold=this[i];
this[i]=this[j];
this[j]=tempHold;
}

return this;

}

var cf = new Crossfader( new Array('cf1','cf2','cf3','cf4').shuffle(), 2000, 4000 );
[/CODE]
Copy linkTweet thisAlerts:
@fibonacci-dauthorDec 31.2007 — I'm surprised anyone would put their name to such a simple method, which is weak because it doesn't prevent elements being swapped with themselves, and why use two temporary variables?
[CODE]
[/QUOTE]

Hey - thanks for both of your ideas. I'd come across the fisher yates one before but didn't know how to implement it with this script so thanks for that "EndangeredMassa". I ended up using the second one though - so thanks "Arty" for that - appreciated.
Chris
×

Success!

Help @fibonacci-d spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...