need help with script for random images

**tech_support** · 03-12-2007, 06:28 AM

Ok.

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.

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

Have you tried hovering over the image?

(2) add a link

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

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

**auntnini** · 03-13-2007, 01:38 AM

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.

**tech_support** · 03-14-2007, 06:36 AM

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>

Thread: need help with script for random images

Thread Tools

Search Thread

eternal thanks

Bookmarks

Bookmarks

Posting Permissions