need help with script for random images

**flyingfish** · 10-13-2006, 09:18 PM

i have to load random images on a page...

ther are 5 sets of images and about 15 images in each set

set 1 contains imga1, imga2, imga3, imga4, imga5, ...
set 2 contains imgb1, imgb2, imgb3, imgb4, imgb5, ...
and so on for 3 more sets

on page load, i want to display in a random order, images from any 1 set...

so if its from set 2, it should load
imgb5, imgb6, imgb9, imgb3, imgb1, ...

if its from set 3, it should load
imgc4, imgc3, imgc7, imgc2, imgc8, ...

each image has to be from the same set
and it shouldnt repeat

can anyone help???

also...

if i have to load on the same page omages from set 1 in 1 div
and from set 2 in another div, is it possible?

**auntnini** · 10-13-2006, 09:51 PM

Me too! Prospective client has many categories but wants 3 images displayed. There are great DD scripts for random slide shows. I just want 3 static sets (or 3 positions) on same page to load randomly to give diversity to page, e.g., http://artdemo.tripod.com Random text captions to load with each image would be nice too (already have DD's http link examples).

**flyingfish** · 10-17-2006, 05:16 AM

anyone????

**tech_support** · 10-17-2006, 06:23 AM

Like this?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.slideSet	{

	display:none;
}
</style>
<script language="javascript" type="text/javascript">
//Random Image Set
//By Peter Nguyen
//Dynamic Drive Forums User: tech_support
//Visit: www.dynamicdrive.com/forums
//This note must stay intact for legal use

var slideSetId = new Array(); //Slide Set Array
slideSetId[0] = "slide0" //Slide Set 0
slideSetId[1] = "slide1" //Slide Set 1
slideSetId[2] = "slide2"

//Add more in the form of slideSet[number] = "your id here"

var slides = 2 //How many slides there are

function initSlideSet()	{

	slides1 = slides+1
	slideSetCount = Math.floor(Math.random()*slides1)
	document.getElementById(slideSetId[slideSetCount]).style.display = 'block'
}
window.onload=initSlideSet
</script>
</head>

<body>
<div id="slide0" class="slideSet">Slide Set 1</div>
<div id="slide1" class="slideSet">Slide Set 2</div>
<div id="slide2" class="slideSet">Slide Set 3</div>
</body>
</html>

It can do content as well as images.

**flyingfish** · 10-18-2006, 03:12 AM

thanx peter

it works... but i would like to randomly load images in the individual sets...

so if ther r 5 imgs in a particular set...

each time the page is loaded, any one of the images has to be displayed

n then after a set duration of may be 5 seconds... another image from the same set has to be loaded....

i m trying to work on this part... using the same logic that is used to randomly load a particular div... but not getting things right with the timer...

in case u can.. please help

**auntnini** · 02-21-2007, 09:40 PM

I tried Peter Nguyen's code (including below version) and, for the life of me, could not get it to work. I'm missing some sort of comprehension here. Where do you specify image array? Could some kind soul clue me in?

http://artdemo.tripod.com/indexRandom3.html
<script language="javascript" type="text/javascript">/*EDITED VERSION*/
/* Random Image Set by Peter Nguyen Dynamic Drive Forums User: tech_support Visit: www.dynamicdrive.com/forums This note must stay intact for legal use */
var slide0 = new Array ();
slide0[0] = "critters/rembrantGirlBroom.jpg";
slide0[1] = "floral/cezanne.chrysanthemums.jpg";
slide0[2] = "floral/vanGogh12sunflowers.jpg";
slide0[3] = "floral/vanGoghSunflowers.jpg";
slide0[4] = "scenes/vanGogh.gif";
slide0[5] = "scenes/cole.jpg";

var slide1 = new Array ();
slide1[0] = "chanit/things/AnemonaesWC.jpg";
slide1[1] = "chanit/things/floralApples.jpg";
slide1[2] = "chanit/things/floralRecycle.jpg";
slide1[3] = "chanit/things/floristDozen.jpg";
slide1[4] = "chanit/things/moreAnemonaes.jpg";
slide1[5] = "chanit/things/Neighbors.jpg";

var slide2 = new Array ();
slide2[0] = "critters/rembrantGirlBroom.jpg";
slide2[1] = "floral/cezanne.chrysanthemums.jpg";
slide2[2] = "floral/vanGogh12sunflowers.jpg";
slide2[3] = "floral/vanGoghSunflowers.jpg";
slide2[4] = "scenes/vanGogh.gif";
slide2[5] = "scenes/cole.jpg";

var slideSetId = new Array(); //Slide Set Array
slideSetId[0] = "slide0" //Slide Set 0
slideSetId[1] = "slide1" //Slide Set 1
slideSetId[2] = "slide2"
//Add more in the form of slideSet[number] = "your id here"

var slides = 2 //How many slides there are

function initSlideSet() {
slides1 = slides+1
slideSetCount = Math.floor(Math.random()*slides1)
document.getElementById(slideSetId[slideSetCount]).style.display = 'block'
}
window.onload=initSlideSet
</script>

**tech_support** · 02-22-2007, 06:16 AM

That was meant for random div's.

Try this:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Random Images</title>
<script type="text/javascript">/*EDITED VERSION*/
/*
Random Image Set by Peter Nguyen (Version 2.0)
Dynamic Drive Forums User: tech_support Visit: www.dynamicdrive.com/forums
This note must stay intact for legal use */

var maxImg = 3 //Maximum Number of Images for each Slide

//Slide Set Images
var slideSets = new Array();
slideSets[0] = ["critters/rembrantGirlBroom.jpg","floral/cezanne.chrysanthemums.jpg","floral/vanGogh12sunflowers.jpg","floral/vanGoghSunflowers.jpg","scenes/vanGogh.gif","scenes/cole.jpg"];
slideSets[1] = ["chanit/things/AnemonaesWC.jpg","chanit/things/floralApples.jpg","chanit/things/floralRecycle.jpg","chanit/things/floristDozen.jpg","chanit/things/moreAnemonaes.jpg","chanit/things/Neighbors.jpg"];
slideSets[2] = ["critters/rembrantGirlBroom.jpg","floral/cezanne.chrysanthemums.jpg","floral/vanGogh12sunflowers.jpg","floral/vanGoghSunflowers.jpg","scenes/vanGogh.gif","scenes/cole.jpg"]

//Add more in the form of slideSets[number] = [imagepaths]

function initSlideSet() {

	for (i=0; i < slideSets.length; i++)	{
		var rand = Math.floor(Math.random() * slideSets[i].length)
		alert(i)
		for (r=0; r < maxImg; r++)	{
			document.getElementById('slides').innerHTML += '<img src="' + slideSets[i][rand] + '" alt="Slide Set Image">'
		}
		
	}
}
window.onload=initSlideSet
</script>
</head>

<body>
<div id="slides"></div>
</body>
</html>

**auntnini** · 03-06-2007, 01:09 AM

Just now getting back to trying your second script. The var maxImg=3 produced 3-up of same image per slot so I changed it to maxImg=1 to get just one image per slot. Now I'm trying to style the display and maybe add other arguments [] per image e.g., caption and URL link. Therefore, I'm going to try for a format something like:

var slideSets = new Array ();
slideSets[0][0] = "critters/rembrantGirlBroom.jpg";
slideSets[0][1] = "floral/cezanne.chrysanthemums.jpg";
. . .
slideSets[1][0] = "chanit/things/AnemonaesWC.jpg";
slideSets[1][1] = "chanit/things/floralApples.jpg";
. . .
slideSets[2][0] = "critters/rembrantGirlBroom.jpg";
slideSets[2][1] = "floral/cezanne.chrysanthemums.jpg";

No doubt will need more help. (Still wish I could comprehend your first version using CSS.) I'll be back (either for help or to point to my results) but wanted to put in a quick "THANK YOU" before too much more time lapses.

**tech_support** · 03-06-2007, 05:58 AM

Originally Posted by auntnini

Still wish I could comprehend your first version using CSS.

I don't know what you mean there.

I've actually re-done the script using DOM. Here's the code and I hope you like it

The script is really easy to follow

The script takes the following layout:
[Image Path,Caption]
eg.

Code:

  ["critters/rembrantGirlBroom.jpg","alttext"],

Let me know if you have any problems.

HTML Code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Random Images with Captions, IDs etc.</title>
<script type="text/javascript">
/*******************
Random Image Sets by Peter Nguyen
Dynamic Drive Forums User: tech_support

This notice must stay intact for legal use
********************/

//Slide Set Images
var slideSets = new Array();
slideSets[0] = [
  ["critters/rembrantGirlBroom.jpg","alttext"],
  ["floral/cezanne.chrysanthemums.jpg","alttext"],
  ["floral/vanGogh12sunflowers.jpg","alttext"],
  ["floral/vanGoghSunflowers.jpg","alttext"],
  ["scenes/vanGogh.gif","alttext"],
  ["scenes/cole.jpg","alttext"]
];
slideSets[1] = [

  ["chanit/things/AnemonaesWC.jpg","alttext"],
  ["chanit/things/floralApples.jpg","alttext"],
  ["chanit/things/floralRecycle.jpg","alttext"],
  ["chanit/things/floristDozen.jpg","alttext"],
  ["chanit/things/moreAnemonaes.jpg","alttext"],
  ["chanit/things/Neighbors.jpg","alttext"]
];
slideSets[2] = [
  ["critters/rembrantGirlBroom.jpg","alttext"],
  ["floral/cezanne.chrysanthemums.jpg","alttext"],
  ["floral/vanGogh12sunflowers.jpg","alttext"],
  ["floral/vanGoghSunflowers.jpg","alttext"],
  ["scenes/vanGogh.gif","alttext"],
  ["scenes/cole.jpg","alttext"]
];

/* Generate a random number, do it again if the number has already been chosen */
var oldr;
function randomizer(maxnum)	{

	//maxnum++
	var r = Math.floor(Math.random() * maxnum)
	if (r == oldr)	{
		return randomizer(maxnum)
	}
	else	{
		
		oldr = r;
		return r;
	}
}

/*Display random image sets */
function randomImgSets(arrayImgSetPaths,setsCount,divDisplay)	{

	for (i=0; i < setsCount; i++)	{
	
		var r = randomizer(arrayImgSetPaths.length)
		for (s=0; s < arrayImgSetPaths[r].length; s++)	{
			var id = document.getElementById(divDisplay)
			if (document.createElement)	{
			
				var e = document.createElement("img")
				e.setAttribute("src", arrayImgSetPaths[r][s][0]+"?r="+r)
				e.setAttribute("alt", arrayImgSetPaths[r][s][1])
				e.setAttribute("id",  arrayImgSetPaths[r][s][2])
				id.appendChild(e)
			}
			else	{
				var content = '<img src="'+arrayImgSetPaths[r][s]+'" alt="Random Set Number: '+r+' Image Number: '+s+'"> <br>'
				id.innerHTML += content;
			}
		}
	}
}
window.onload = function() {

	randomImgSets(slideSets, 1, "sliders")
}
</script>
</head>

<body>
<div id="sliders"></div>
</body>
</html>

**auntnini** · 03-11-2007, 04:02 AM

Still struggling with this, but wanted to thank you again for your continued wonderful input.

In my 3/05/07 response using slideSets[0][0]="___", was thinking of a favorite script http://www.wsabstract.com/script/scr...ultishow.shtml for “Multi Slideshows,” used at http://chanit.com/people/index.htm. That proved too complex. Then, seeing your kind 3/06/07 entry using [double [square brackets]], my error was evident.

But just cannot get it to behave as wished. The image sets are 6-up (not 3) so tried defining a var maxnum= in all sorts of ways and fiddling with other things, but could not comprehend what +”?r=”+r did in
var e = document.createElement("img")
e.setAttribute("src", arrayImgSetPaths[r][s][0]+"?r="+r)

Also could not: (1) get the captions (“altText”) to show up, (2) add a link, (3) or position the images inside my “picbox” div (which would resize them, hold images and captions together, etc.). See my attempts with your 3/05/07 script at http://artdemo.tripod.com/randomDD3.html.

Returning to your previous 2/22/07 entry, got the images into “picbox” divs by using
for (r=0; r < maxImg; r++) {
document.getElementById('slides').innerHTML +=
'<div class="picbox"><img src="' + slideSets[i][rand] + '"
alt="Slide Set Image"> </div>' }
as can be viewed at http://artdemo.tripod.com/random3DD.html.

By studying both of your scripts, hope to get my act together: 3 sets/slots of random images with a heading for each slot (e.g., Paintings, Prints, Illustrations) and a caption and link for each random image). The prospective client who got me on this bumpy road (for http://artdemo.tripod.com/index.html) is long gone, but the concept has become a tantalizing effort that I’m still struggling with.