need help with script for random images

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?

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).

anyone????

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.

works but need a little more help

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

3 separate sets of random images

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>

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>

thank you Peter Nguyen

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.

Quote:

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>

Thanks again

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.

Ok.

Quote:

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)

Because there's 6 images per set. So it'll display all the images in the set.

Quote:

(1) get the captions (“altText”) to show up

Have you tried hovering over the image?

Quote:

(2) add a link

I've added the link feature to it. See the latest code (bottom)

Quote:

(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.

How do you want it posistioned?

And here's the 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","link"], ["floral/cezanne.chrysanthemums.jpg","alttext","link"], ["floral/vanGogh12sunflowers.jpg","alttext","link"], ["floral/vanGoghSunflowers.jpg","alttext","link"], ["scenes/vanGogh.gif","alttext","link"], ["scenes/cole.jpg","alttext","link"] ]; slideSets[1] = [ ["chanit/things/AnemonaesWC.jpg","alttext","link"], ["chanit/things/floralApples.jpg","alttext","link"], ["chanit/things/floralRecycle.jpg","alttext","link"], ["chanit/things/floristDozen.jpg","alttext","link"], ["chanit/things/moreAnemonaes.jpg","alttext","link"], ["chanit/things/Neighbors.jpg","alttext","link"] ]; slideSets[2] = [ ["critters/rembrantGirlBroom.jpg","alttext","link"], ["floral/cezanne.chrysanthemums.jpg","alttext","link"], ["floral/vanGogh12sunflowers.jpg","alttext","link"], ["floral/vanGoghSunflowers.jpg","alttext","link"], ["scenes/vanGogh.gif","alttext","link"], ["scenes/cole.jpg","alttext","link"] ]; /* 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 l = document.createElement("a") l.setAttribute("href", arrayImgSetPaths[r][s][2]) var e = document.createElement("img") e.setAttribute("src", arrayImgSetPaths[r][s][0]+"?r="+r) e.setAttribute("alt", arrayImgSetPaths[r][s][1]) e.setAttribute("id", "img"+s) e.setAttribute("style", "border:0;") id.appendChild(l) l.appendChild(e) } else { var content = '<a href="'+arrayImgSetPaths[r][s][3]+'"><img src="'+arrayImgSetPaths[r][s][0]+'" alt="'+arrayImgSetPaths[r][s][1]+'"></a>' id.innerHTML += content; } } } } window.onload = function() { randomImgSets(slideSets, 1, "sliders") } </script> </head> <body> <div id="sliders"></div> </body> </html>

"link" : The link.
"alttext" : The caption

Let me know if you want any more help.

eternal thanks

Thanks again and again "Peter Nguyen Dynamic Drive Forums tech_support." You are wonderful and I appreciate all the help.

Don't think I'm explaining myself clearly. Desired effect is 3 CONSTANT SLOTS (each in a "picbox" div with designated header and link to 1 of 3 sub-sections in site), into which are displayed random images (1 random image at a time per slot with its random title/caption).

I've been trying to tweak your script, but keep getting 6 random images displaying at a time. And could not figure out how to add the <div class="picbox"> to encompass/resize the images. I'm closer to the effect desired with your previous 2/22/07 script to which I added resizing div=picbox.

All this .. just to give home page a fresh look each time it is loaded ... such as http://californiawatercolor.com/customer/home.php. I do not have server-sie PHP. Have been trying to learn more about "JASON" object notation as a possible alternative.

Ok, here's another version of it.

I displays 3 images in one set, captions under images, width, height.

Where it says ,800,600],
800 = width
600 = height

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","link",800,600], ["floral/cezanne.chrysanthemums.jpg","alttext","link",800,600], ["floral/vanGogh12sunflowers.jpg","alttext","link",800,600], ["floral/vanGoghSunflowers.jpg","alttext","link",800,600], ["scenes/vanGogh.gif","alttext","link",800,600], ["scenes/cole.jpg","alttext","link",800,600] ]; slideSets[1] = [ ["chanit/things/AnemonaesWC.jpg","alttext","link",800,600], ["chanit/things/floralApples.jpg","alttext","link",800,600], ["chanit/things/floralRecycle.jpg","alttext","link",800,600], ["chanit/things/floristDozen.jpg","alttext","link",800,600], ["chanit/things/moreAnemonaes.jpg","alttext","link",800,600], ["chanit/things/Neighbors.jpg","alttext","link",800,600] ]; slideSets[2] = [ ["critters/rembrantGirlBroom.jpg","alttext","link",800,600], ["floral/cezanne.chrysanthemums.jpg","alttext","link",800,600], ["floral/vanGogh12sunflowers.jpg","alttext","link",800,600], ["floral/vanGoghSunflowers.jpg","alttext","link",800,600], ["scenes/vanGogh.gif","alttext","link",800,600], ["scenes/cole.jpg","alttext","link",800,600] ]; /* 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,maximgsets,divDisplay) { for (i=0; i < setsCount; i++) { var r = randomizer(arrayImgSetPaths.length) for (s=0; s < maximgsets; s++) {//arrayImgSetPaths[r].length var id = document.getElementById(divDisplay) try { var l = document.createElement("a") l.setAttribute("href", arrayImgSetPaths[r][s][2]) var e = document.createElement("img") var p = document.createElement("p") var text = arrayImgSetPaths[r][s][1]; //document.createTextNode( e.setAttribute("src", arrayImgSetPaths[r][s][0]+"?r="+r) e.setAttribute("alt", arrayImgSetPaths[r][s][1]) e.setAttribute("id", "img"+s) e.setAttribute("style", "border:0;"); e.setAttribute("width", arrayImgSetPaths[r][s][3]) e.setAttribute("height", arrayImgSetPaths[r][s][4]) p.innerHTML = text l.appendChild(e) //Link appending image id.appendChild(l) //DivID appending link id.appendChild(p) //Link appending text } catch(ex) { var content = '<p>' content +='<a href="'+arrayImgSetPaths[r][s][3]+'">' content +='<img src="'+arrayImgSetPaths[r][s][0]+'" alt="'+arrayImgSetPaths[r][s][1]+'" width="'+arrayImgSetPaths[r][s][3]+'" height="'+arrayImgSetPaths[r][s][4]+'">' content +='</a><br>' content +=arrayImgSetPaths[r][s][1] content +='</p>' id.innerHTML += content; } } } } window.onload = function() { randomImgSets(slideSets, 1, 3, "sliders") } </script> </head> <body> <div id="sliders"></div> </body> </html>