Forum Moderators: open
I want to be able to display a random image on a page. Easy enough, but I have an external .js file that I use for another purpose and I want to use the same file to produce the random images.
My external .js file is called 'paintings.js' and looks like this:
var data=new Array();data[0] = "Woman Reading, 20 x 30 Acrylic on Canvas, £150, paintings/woman-reading.jpg"
data[1] = "Pond Life, 16 x 12 Acrylic on Canvas, £50, paintings/pond-life.jpg"
data[2] = "Cracked Ice, 16 x 12 Acrylic on Canvas, £50, paintings/cracked-ice.jpg"
data[3] = "Backing onto the Beach, 20 x 15 Acrylic on Canvas, £50, paintings/backing-onto-the-beach.jpg"
...
There are a total of 29 'data[#]', but this won't be static as the number of images would increase or decrease as paintings are sold or new ones added.
So what I want to do is retrieve a random url of an image from the data and display it on the page. I wouldn't mind being able to display the name of the painting too if that is possible.
As you can see, the data rows (after 'data[#]') are made up of "painting name, painting dimensions etc, price, picture url".
I hope you can help. Many thanks in advance.
Pantyboy
here is an example that may give you some ideas...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image and Text rotator</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://hstrial-dbayly.homestead.com/files/"/><style type="text/css">
/*<![CDATA[*/body {
background:#666666;
}
#content {
width:202px;
position:absolute;
left:50%;
top:25%;
margin-left:-101px;
}
#foo,#foot {
width:180px;
padding:10px;
border:solid 1px #000000;
background:#eeeeff;
font-family:verdana;
font-size:12px;
text-align:center;
}
#image {
margin:0 0 -3px 0;
}
#fool {
width:200px;
height:200px;
border-left:solid 1px #000000;
border-right:solid 1px #000000;
}/*//]]>*/
</style><script type="text/javascript">
//<![CDATA[var data=new Array();
data[0]="Woman Reading,<br /> 20 x 30 Acrylic on Canvas";
data[1]="Pond Life,<br /> 16 x 12 Acrylic on Canvas";
data[2]="Cracked Ice,<br /> 16 x 12 Acrylic on Canvas";
data[3]="Backing onto the Beach,<br /> 20 x 15 Acrylic on Canvas";var images=new Array();
images[0]="anim.gif";
images[1]="anim1.gif";
images[2]="anim2.gif";
images[3]="anim3.gif";var price=new Array();
price[0]="£150";
price[1]="£250";
price[2]="£50";
price[3]="£450";var i=0;
var speed=5000;
function rotatePictures() {
document.getElementById('foo').innerHTML=data[i];
document.getElementById('fool').src=images[i];
document.getElementById('foot').innerHTML=price[i];
i++;
if(i>data.length-1) {
i=0;
}
setTimeout(' rotatePictures()',speed)
}
onload=rotatePictures;//]]>
</script></head>
<body><div id="content">
<div id="foo"></div>
<div id="image"><img id="fool" src="anim.gif" alt=""/></div>
<div id="foot"></div>
</div></body>
</html>
birdbrain
Thanks for the example, but I already have a script for doing random images that way. I want to use the data in the external .js file so I don't have to type in 29 (in this case) references.
I want to pull the data in from the external file.
Pantyboy
This means that, since we are using the comma as a delimiter, you can't have any other commas in your data strings (ie not for punctuation).
Use birdbrain's script, with these amendmends:
/* put this anywhere at top of script */
String.prototype.trim = function(){ return this.replace(/(^\s+)¦\s+$/g,"")};/* amend function */
function rotatePictures() {
var dat = data[i].split(',');
var title = dat[0].trim();
var specs = dat[1].trim();
var price = dat[2].trim();
var src = dat[3].trim();
/* assign these values how you like: eg */
document.getElementById('foo').innerHTML = title;
document.getElementById('fool').src = src;
document.getElementById('foot').innerHTML = price;/* carry on as before...*/
I'm sorry but I think we may have our wires crossed.
I want to display a picture (at random) - which changes each time a user enters (or refreshes) a web page - from an array held in an external file.
Both scripts posted here are for rotating images. Sorry.
Pantyboy
This is now random....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image and Text rotator</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://hstrial-dbayly.homestead.com/files/"/><style type="text/css">
/*<![CDATA[*/body {
background:#666666;
}
#content {
width:202px;
position:absolute;
left:50%;
top:25%;
margin-left:-101px;
}
#foo,#foot {
width:180px;
padding:10px;
border:solid 1px #000000;
background:#eeeeff;
font-family:verdana;
font-size:12px;
text-align:center;
}
#image {
margin:0 0 -3px 0;
}
#fool {
width:200px;
height:200px;
border-left:solid 1px #000000;
border-right:solid 1px #000000;
}/*//]]>*/
</style><script type="text/javascript">
//<![CDATA[var data=new Array();
data[0]="Woman Reading,<br /> 20 x 30 Acrylic on Canvas";
data[1]="Pond Life,<br /> 16 x 12 Acrylic on Canvas";
data[2]="Cracked Ice,<br /> 16 x 12 Acrylic on Canvas";
data[3]="Backing onto the Beach,<br /> 20 x 15 Acrylic on Canvas";var images=new Array();
images[0]="anim.gif";
images[1]="anim1.gif";
images[2]="anim2.gif";
images[3]="anim3.gif";var price=new Array();
price[0]="£150";
price[1]="£250";
price[2]="£50";
price[3]="£450";var i=Math.floor(Math.random()*data.length);
function rotatePictures() {
document.getElementById('foo').innerHTML=data[i];
document.getElementById('fool').src=images[i];
document.getElementById('foot').innerHTML=price[i];}
onload=rotatePictures;//]]>
</script></head>
<body><div id="content">
<div id="foo"></div>
<div id="image"><img id="fool" src="anim.gif" alt=""/></div>
<div id="foot"></div>
</div></body>
</html>
birdbrain
Excellent stuff
Pantyboy
