Help to randomize slideshow in this script

M

mrtaka79

Okay, first of all, I'm a complete noob, so go easy on me. I have this
code that works perfectly for me. The only thing I want to add is to
randomize the pictures/links that show up. Can anyone just tell me
where to add additional code to the following? BTW this is the only
code I could find that works in my Beta Blogger sidebar.


<a href="javascript:gotoshow()"><img border="0" width="300"
src="/OneMissedCall1.jpg" name="slide" height="150"/></a>
<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages=new Image()
slideimages.src=slideshowimages.arguments
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks=slideshowlinks.arguments
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

<a href="javascript:gotoshow()"><img border="0" width="300"
src="OneMissedCall1.jpg" name="slide" height="150"/></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("/OneMissedCall1.jpg","/2LDK1.jpg","/TokyoZombie-001.jpg")
slideshowlinks("/one-missed-call.html","/2ldk.html","/tokyo-zombie.html")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=4000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>


Any help would be MUCH appreciated! Thank you.
 
A

ASM

mrtaka79 a écrit :
Okay, first of all, I'm a complete noob, so go easy on me. I have this
code that works perfectly for me. The only thing I want to add is to
randomize the pictures/links that show up. Can anyone just tell me
where to add additional code to the following? BTW this is the only
code I could find that works in my Beta Blogger sidebar.
(snip)

<a href="javascript:gotoshow()"><img border="0" width="300"
src="OneMissedCall1.jpg" name="slide" height="150"/></a>

No,

<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("/OneMissedCall1.jpg","/2LDK1.jpg","/TokyoZombie-001.jpg")
slideshowlinks("/one-missed-call.html","/2ldk.html","/tokyo-zombie.html")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=4000

// randomize
function radomSlideShow() {
var L = slideshowimages.length;
var R = new Array();
var k = 0;
while(k<L) {
var n = Math.floor(Math.random()*L)
var ok = true;
for(var i=0; i<R.length; i++)
if(R == n) ok = false;
if(ok) { R[R.length] = n; k++ }
}
return R;
}

var randomOrder = radomSlideShow();
var whichlink=0
var whichimage=0

function slideit(){
if (!document.images)
return
whichlink=randomOrder[whichimage];
document.images.slide.src=slideimages[whichlink].src
if (whichimage<slideimages.length-1)
whichimage++
else {
randomOrder = radomSlideShow();
whichimage=0;
}
setTimeout("slideit()",slideshowspeed)
}
 
M

mrtaka79

Hello, thank you very much for your help! However...it doesn't work for
me. I've tried variations and every which way of the amended code but
it still doesn't slide randomly, stops sliding all together w/ links
broken or doesn't work at all (empty widget). If you can patiently bare
with me, can you kindly write the whole code again so that I can just
copy and paste it? I feel that I'm almost there but I'm missing
something. Oh, and in the random code, there's this: "function
radomSlideShow() {"
is it 'radom' or 'random'? Just wondering if that's part of the
problem. Anyhow, thanks again for your help.
 
L

Lee

mrtaka79 said:
Okay, first of all, I'm a complete noob, so go easy on me. I have this
code that works perfectly for me. The only thing I want to add is to
randomize the pictures/links that show up. Can anyone just tell me
where to add additional code to the following? BTW this is the only
code I could find that works in my Beta Blogger sidebar.

I don't really like that code. I made some easy fixes,
mostly adding the "type" attribute to the script tag, but
left most of it alone, except to add code to randomize the
images.


<a href="javascript:gotoshow()"><img border="0" width="300"
src="/OneMissedCall1.jpg" name="slide" height="150"/></a>
<script type="text/javascript">

// Random and Deal from http://www.merlyn.demon.co.uk/js-randm.htm
// A much better source than javascriptkit.com, apparently.

function Random(N) {
return Math.floor(N * (Math.random() % 1));
}
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;
}


/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages=new Image()
slideimages.src=slideshowimages.arguments
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks=slideshowlinks.arguments
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[randomized[whichlink]])
else
winslide.location=slidelinks[randomized[whichlink]]
winslide.focus()
}

</script>

<a href="javascript:gotoshow()"><img border="0" width="300"
src="OneMissedCall1.jpg" name="slide" height="150"/></a>
<script type="text/javascript">

//configure the paths of the images, plus corresponding target links
slideshowimages("/OneMissedCall1.jpg","/2LDK1.jpg","/TokyoZombie-001.jpg")
slideshowlinks("/one-missed-call.html","/2ldk.html","/tokyo-zombie.html")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=4000

// Create a randomized set of indices:
var randomized=Deal(slideimages.length);

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[randomized[whichimage]].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

</script>


--
 
A

ASM

mrtaka79 a écrit :
Hello, thank you very much for your help! However...it doesn't work for
me. I've tried variations and every which way of the amended code but
it still doesn't slide randomly, stops sliding all together w/ links
broken or doesn't work at all (empty widget). If you can patiently bare
with me, can you kindly write the whole code again so that I can just
copy and paste it? I feel that I'm almost there but I'm missing
something. Oh, and in the random code, there's this: "function
radomSlideShow() {"
is it 'radom' or 'random'? Just wondering if that's part of the
problem. Anyhow, thanks again for your help.

Did I make a mistake ?

the name of function has any importance, you just need to use it by its
name (could be $() or foo() or asm() ...)

Code tested :
=============

<a href="javascript:gotoshow()"><img border="0" width="300"
src="/OneMissedCall1.jpg" name="slide" height="150"/></a>

<script type="text/javascript">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
var winslide = false;

// randomize
// function to create an array sorting indexes
// of array slideimages in random :

function randomSlideShow() {
var L = slideimages.length;
var R = new Array();
var k = 0;
while(k<L) {
var n = Math.floor(Math.random()*L)
var ok = true;
for(var i=0; i<R.length; i++)
if(R == n) ok = false;
if(ok) { R[R.length] = n; k++ }
}
return R;
}

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

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks=slideshowlinks.arguments
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open('','','width=600,height=500,resizable=1')
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

<a href="javascript:gotoshow()"><img border="0" width="300"
src="OneMissedCall1.jpg" name="slide" height="150"/></a>

<script type="text/javascript">
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("/OneMissedCall1.jpg","/2LDK1.jpg","/TokyoZombie-001.jpg")
slideshowlinks("/one-missed-call.html","/2ldk.html","/tokyo-zombie.html")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=4000

// new array of random indexes
var randomOrder = randomSlideShow();

var whichlink=0;
var whichimage=0;

function slideit(){
if (!document.images)
return
whichlink=randomOrder[whichimage];
document.images.slide.src=slideimages[whichlink].src
if (whichimage<slideimages.length-1)
whichimage++
else {
randomOrder = randomSlideShow();
whichimage=0;
}
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
 
M

mrtaka79

It works perfectly! Thank you all for your patience. Couldn't have done
it without you, keep up the good work!
 
D

Dr J R Stockton

Fri said:
...
The only thing I want to add is to randomize the pictures/links that
show up.
...

Firstly, ISTM, one must consider what "randomise" of pictures 1 to N
should mean, if in a show of infinite length.

I see two limiting cases :

A) The pictures are chosen at random, independently of what went before.
The chances of a repeat, in any one display, of the previous picture
are 1 in N; the chances of a repeat, in a total of N draws, must
exceed 50%.

B) The pictures are assigned, once and for all, a random order; and that
order is repeatedly cycled through. Picture P is either always or
never followed by picture Q.

Then there's

C) One can draw the pictures in random order, show them all, and repeat
draw-and-show. There's then a 1 in N chance of a repeat at the end
of each cycle, and ISTM a 2 in N chance of a picture being repeated
with a single one in between.

Now consider

D) Deal, once and for all, the set of N picture-numbers into an array X.
Then, for each display, select at random one of the first M entries;
show it; and move its entry to the end of the array, allowing other
entries to move forwards. Easily coded, of course.

If M==N, we have Case A.
If M==1, we have Case B.
If M==N-K, repeats of a picture occur at intervals containing at least K
other pictures.
But, as in Case A but not Case B, it is still possible (if Random is
perfectly random, which it is not), for an unlucky picture never to be
shown; there is no upper limit on the interval between showings of a
given picture.

QUERY : is there a simple elegant method including the advantage of Case
D but fixing the defect?

Of course, one could maintain for each entry in the first M a countdown
of how long it had been there, starting at M+J, and select an entry when
its count reached 0, treating it as if it had been chosen as before. But
I see no better way of doing that than a loop through all M decrementing
an array element ...

Test Code for Case D :

function Slides() { var N = 8, M = 4, Q = Deal(N), A = [], j, r, k, t
document.writeln("Q: ", Q)
for (j=0 ; j<64 ; j++) { r = Random(M) ; t = A[j] = Q[r]
for (k=r+1 ; k<N ; k++) Q[k-1] = Q[k] ; Q[N-1] = t }
document.writeln("A: ", A.join(""), "\nQ: ", Q) }

Can the k loop be *better* written with array methods ?

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top