PDA

View Full Version : Help! Random Images


cocoonfx
05-21-2008, 12:31 AM
Hello Chaps


I have found the following code for selecting images and randomly selecting them. I then want to have three thumbnails which display 3 different images. However at present i can have 3 of the same images showing.

What i want to do is make sure that the 3 thumbnail boxes never select the same image. As i am still working out java i am not sure how to do this.

My code is below, and this is what it looks like www.somethingsiam.com (http://www.somethingsiam.com) its the 3 images down the right side. HELP!


<script type="text/javascript" language="JavaScript">
NumberOfImagesToRotate = 20;

FirstPart = '<img src="image';
LastPart = '.jpg" width="125" height="125">';

function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>

<div id="right">
<p>
<div class="thumb"><script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script></div>
<div class="thumb"><script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script></div>
<div class="thumb"><script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script></div>

davidj
05-21-2008, 06:35 AM
are your images named numericaly

cocoonfx
05-21-2008, 06:45 AM
Hello Dj


Yes i.e images1 to images20

ranjan
05-21-2008, 09:16 PM
Paste in head of document


<script type="text/javascript">
Array.prototype.shuffle = function() {//extend array to shuffle
var myArray = new Array();
for (i=0; i<this.length; i++) {
var control = true;
while (control) {
j = Math.floor(Math.random()*this.length);
if (myArray[j] == undefined) {
myArray[j] = this[i];
control = false;
}
}
}
return myArray;
};
function shuffleNumbers(max) {
allNumbers = new Array(); //generate array
for(i=0; i<max; i++){
allNumbers[i] = i+1;
}
var shuffled = allNumbers.shuffle(); //shuffle it
return shuffled;
}
window.onload = function() {
var noOfImages = 20; // number of images
var shuffledImages = shuffleNumbers(noOfImages); //shuffle them
var imgHTML = '<img src="image'+shuffledImages[0]+'.jpg">'+'<img src="image'+shuffledImages[1]+'.jpg">'+'<img src="image'+shuffledImages[2]+'.jpg">'; //first 3 in shuffled
document.getElementById('randomImages').innerHTML = imgHTML; //write the HTML
}
</script>


Paste inside you div id=right


<div id="randomImages"></div>

pete
05-21-2008, 09:45 PM
Ranjan, great solution but not sure you should be modifying core JS objects

ranjan
05-21-2008, 10:22 PM
I am just extending the object... the core methods are

http://www.w3schools.com/jsref/jsref_obj_array.asp

I just added a custom method (shuffle) in addition to the default ones.

Basic OOP

cocoonfx
05-21-2008, 10:49 PM
IT works which is excellent, thank you for your help. I know have to understand the code :grin:

domedia
05-21-2008, 10:59 PM
Cocoon, I've heard 'Simply Javascript' from Sitepoint is an awesome starting book :)

cocoonfx
05-21-2008, 11:03 PM
Cheers domedia i will have a look at amazon.

pete
05-22-2008, 09:00 AM
I am just extending the object... the core methods are

http://www.w3schools.com/jsref/jsref_obj_array.asp

I just added a custom method (shuffle) in addition to the default ones.

Basic OOP

My point is it has the potential to break other scripts, however in this case I assume it is doubtful that will happen. There was a big debate about Prototype breaking scripts and many developers warn against using Prototype.