random image Rotation

[Brian]

Hi there

I have been looking for a script that can randomly rotate 8
different images on 1 page. I used to have a script that
did this but can't find it now.
I have found loads of script that will load a differnet image
each time the page loads, or will rotate 1 image at a time,
but not one that can do 8 images from a list of images

Does anybody know of one?

Brian

 

[Evertjan.]

Brian wrote on 10 mrt 2007 in comp.lang.javascript:

I have been looking for a script that can randomly rotate 8
different images on 1 page. I used to have a script that
did this but can't find it now.
I have found loads of script that will load a differnet image
each time the page loads, or will rotate 1 image at a time,
but not one that can do 8 images from a list of images

Does anybody know of one?

Perhaps it wold be better, in this case of specialized taste,
if you build it from scratch.

Better in the sense that the code acts exactly as you wish,
and better n the sense that you learn from it,
and beter in the sense that you get pleasure and satisfaction from it.

You can use your "loads of script" to guide you.

If you really get stuck, this NG is a place for help.

===========

A good way to start is first to generate a random sequence
in an array that has the right length of your total number of pics.
Then take the top 8 for showing, then the next, etc.

However, there are many ways to Rome, and it wasn't build in one day.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]

I have been looking for a script that can randomly rotate 8
different images on 1 page. I used to have a script that
did this but can't find it now.
I have found loads of script that will load a differnet image
each time the page loads, or will rotate 1 image at a time,
but not one that can do 8 images from a list of images

Does anybody know of one?

<URL:http://www.merlyn.demon.co.uk/js-randm.htm#IRSS> will instruct you.

It's a good idea to read the newsgroup and its FAQ. See below.

 

[Brian]

Evertjan wrote

Perhaps it wold be better, in this case of specialized taste,
if you build it from scratch.

Better in the sense that the code acts exactly as you wish,
and better n the sense that you learn from it,
and beter in the sense that you get pleasure and satisfaction from it.

You can use your "loads of script" to guide you.

If you really get stuck, this NG is a place for help.

Hi there

Well I have spent the day trying to write my first javescript, and well its
sort of working,
I'm trying to make it a little neater but I can't work out what's wrong.

I'm trying to change this

imgnum = Math.floor(Math.random()*theimages.length)
document.images.img1.src = theimages[imgnum].src
imgnum = Math.floor(Math.random()*theimages.length)
document.images.img2.src = theimages[imgnum].src
imgnum = Math.floor(Math.random()*theimages.length)
document.images.img3.src = theimages[imgnum].src

to this

for (i=0;i<theimages.length;i++){
imgnum = Math.floor(Math.random()*slideimages.length)
document.images.slide.src = slideimages[imgnum].src
}

but it's not working, and I can't work out why, I have posted all the
code below, any help would be great

thanks

Brian

<script language="JavaScript">
<!--
var theimages = new Array()
var thelinks = new Array()

function imagelist(){
for (i=0;i<imagelist.arguments.length;i++){
theimages = new Image()
theimages.src = imagelist.arguments
}
}

function linklist(){
for (i=0;i<linklist.arguments.length;i++)
thelinks=linklist.arguments
}

function openurl(){
location.href = thelinks[urllink]
}
//-->
</script>

<a href="javascriptpenurl()"><img src="image1.jpg" name="img1" width="150"
height="150" border=0 id="img1"></a>
<a href="javascriptpenurl()"><img src="image2.jpg" name="img2" width="150"
height="150" border=0 id="img2"></a>
<a href="javascriptpenurl()"><img src="image3.jpg" name="img3" width="150"
height="150" border=0 id="img3"></a></p>

<script>
<!--
imagelist("image1.jpg", "image2.jpg", "image3.jpg")
linklist("http://www.site1.com", "http://www.site2.com",
"http://www.site3.com")

var speed=1000
var whichimage=0
var imgnum = 0
function chnageimages(){
if (!document.images)
return
for (i=0;i<theimages.length;i++){
imgnum = Math.floor(Math.random()*slideimages.length)
document.images.img.src = slideimages[imgnum].src
}
imgnum = Math.floor(Math.random()*theimages.length)
document.images.img1.src = theimages[imgnum].src
imgnum = Math.floor(Math.random()*theimages.length)
document.images.img2.src = theimages[imgnum].src
imgnum = Math.floor(Math.random()*theimages.length)
document.images.img3.src = theimages[imgnum].src

urllink = imgnum

setTimeout("chnageimages()",speed)
}
chnageimages()
//-->
</script>

 

[Evertjan.]

Brian wrote on 11 mrt 2007 in comp.lang.javascript:

Hi there

Well I have spent the day trying to write my first javescript, and
well its sort of working,
I'm trying to make it a little neater but I can't work out what's
wrong.

I seem to remember I wrote the following:

A good way to start is first to generate a random sequence
in an array that has the right length of your total number of pics.
Then take the top 8 for showing, then the next, etc.

So let's start [NOT TESTED],
you can position the imgs later with absolute css:

<img id='p0' src=''><br>
<img id='p1' src=''><br>
<img id='p2' src=''><br>
<img id='p3' src=''><br>
<img id='p4' src=''><br>
<img id='p5' src=''><br>
<img id='p6' src=''><br>
<img id='p7' src=''><br>

<script type='text/javascript'>

var a = []; // array
var max = 100; // number of pics
for (var i=0;i<max;i++)
a=i; // fill with numbers 0 - 99
for (var i=0;i<max*3;i++) {
n1 = Math.floor(Math.random()*max);
n2 = Math.floor(Math.random()*max);
// never mind if some swap with themselves
temp = a[n1];
a[n1] = a[n2];
a[n2] = temp; // swap the numbers at random
};

// "a" is now a reasonable random sequence array of 100 unique numbers

var where = 0; // sequence pointer

function fill8(){
for (var i=0;i<8;i++){
document.getElementById("p"+i).src = // fill p0 - p7
"/images/myImageNr" + a[where] + ".jpg"; // with the next random 8
where = (where < max-1) ? where+1 : 0; // increment the pointer
circular
};
setTimeout('fill8()',6000); // next change 6 seconds in future
};

fill8(); // start, or do this in body onload

</script>

If you have made this wokring,
I am sure to have made some silly mistakes,
you can add preloading.

 

[ASM]

Brian a écrit :

for (i=0;i<theimages.length;i++){
imgnum = Math.floor(Math.random()*slideimages.length)
document.images.slide.src = slideimages[imgnum].src
}

but it's not working, and I can't work out why, I have posted all the
code below, any help would be great

for (i=0;i<theimages.length;i++){
imgnum = Math.floor(Math.random()*slideimages.length)
document.images.['img'+i].src = slideimages[imgnum].src
}

but ... in your example bellow
for your array of images you don't use 'slideimages' but 'theimages'

<script language="JavaScript">
<!--
var theimages = new Array()
var thelinks = new Array()

function imagelist(){
for (i=0;i<imagelist.arguments.length;i++){
theimages = new Image()
theimages.src = imagelist.arguments
}
}

function linklist(){
for (i=0;i<linklist.arguments.length;i++)
thelinks=linklist.arguments
}

this one is curious :

function openurl(){
location.href = thelinks[urllink]
}

after changing images the 3 links will send to same url
on each call of chnageimages()

//-->
</script>

<a href="javascriptpenurl()"><img src="image1.jpg" name="img1" width="150"
height="150" border=0 id="img1"></a>
<a href="javascriptpenurl()"><img src="image2.jpg" name="img2" width="150"
height="150" border=0 id="img2"></a>
<a href="javascriptpenurl()"><img src="image3.jpg" name="img3" width="150"
height="150" border=0 id="img3"></a></p>

<script>
<!--
imagelist("image1.jpg", "image2.jpg", "image3.jpg")
linklist("http://www.site1.com", "http://www.site2.com",
"http://www.site3.com")

var speed=1000
var whichimage=0
var imgnum = 0
function chnageimages(){
if (!document.images)
return
for (i=0;i<theimages.length;i++){
imgnum = Math.floor(Math.random()*slideimages.length)

imgnum = Math.floor(Math.random()*theimages.length)
document.images['img'+(+1+i)].src = theimages[imgnum].src;
// or :
// document.images.src = theimages[imgnum].src;
document.links.href = thelinks[imgnum];
}

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>

var a = []; // array
var max = 100; // number of pics
for (var i=0;i<max;i++)
a=i; // fill with numbers 0 - 99
for (var i=0;i<max*3;i++) {
n1 = Math.floor(Math.random()*max);
n2 = Math.floor(Math.random()*max);
// never mind if some swap with themselves
temp = a[n1];
a[n1] = a[n2];
a[n2] = temp; // swap the numbers at random
};

// "a" is now a reasonable random sequence array of 100 unique numbers

One can do better than that, by following a link in the FAQ.

function Deal(N) { var J, K, Q = new Array(N)
for (J=0; J<N; J++) { K = Random(J+1) ; Q[J] = Q[K] ; Q[K] = J }
return Q }

That, with minimum effort, and assuming that Math.random is perfect,
generates any of the possible sequences with exactly equal probability;
yours does not give exactly equal probability, only very nearly so, and
takes longer. Note that Random(1) is used.


But the OP does not want all of that array; there is no need to
randomise the order of the unwanted elements.

function PickSubsetSequenced(Q, M) { var J, K, L = Q.length, T
for ( K = L ; K > L-M ; K-- ) { J = Random(K)
T = Q[K-1] ; Q[K-1] = Q[J] ; Q[J] = T }
return Q.slice(L-M) }


The OP probably wants the first 8 images to be chosen at random, but
different; and to be replaced after an interval by another 8 similarly
chosen but perhaps required to be different. Alternatively, after
loading the first 8 "instantly", the replacements might occur one at a
time or in rapid sequence.

By using the method of "Indefinite Random Slide Show" and writing in
turn to each of the 8 positions in order at appropriately-varying
intervals including nominal zero [*], many likely possibilities can be
achieved (including making changes at random intervals).

var J = 0, Delay = [10,10,10,10,10,10,10,3000]
function Go() { // untested
Image[J] = next-one
setTimeout("Go()", Delay[J]
J = (J+1)%8 }



Random sequences should not be generated with a method chosen at random;
they should be generated by a method chosen from Knuth.


[*] Has any difficulty been reported with setTimeout(xxx, 0) ? If so,
use a delay of say 10.

It's a good idea to read the newsgroup and its FAQ. See below.

 

[Brian]

Thanks for all your help guys, i have it working now

Brian