Random display of images!!

[Former Member]

Hi

I'm following the previous post and accordingly i was able to display a image on the iView.

Now I've a list of images

say image1.jpg, image2.jpg, image3.jpg and so on..

Now i want to pick any one of them and display any one of them. how do i go about this.

Following is the code which i wrote can't find the error in it.

<script type="javascript">
var images = new Array();

images[0] = "/images/birds.jpg";
images[1] = "/images/child.jpg";
images[2] = "/images/dolphin1.jpg";
images[3] = "/images/dolphin2.jpg";
images[4] = "/images/fish.jpg";
images[5] = "/images/kayak.jpg";
images[6] = "/images/man.jpg";
images[7] = "/images/pasture1.jpg";
images[8] = "/images/pasture2.jpg";
images[9] = "/images/pasture3.jpg";
images[10] = "/images/runner.jpg";

var rannum = Math.floor(Math.random()*11)
var choice = images[rannum];

</script>

<% String image2 = componentRequest.getWebResourcePath() + "/images/insidetrack3.gif"; %>
<% String image1 = componentRequest.getWebResourcePath() + "/images/pasture1.jpg";%>

<IMG SRC="<%=image1%>" WIDTH="340" HEIGHT="238" BORDER="0" ALIGN="left">
<IMG SRC="<%=image2%>" WIDTH="360" HEIGHT="238" BORDER="0">

can anyone help me out.

Thanks in advance

Srikant

[Former Member · Accepted solution]

Hi,

you do not use the calculated image "choice". You always refer to "/images/insidetrack3.gif"; and "/images/pasture1.jpg";%.

[Former Member · Accepted solution]

Hi Martin

10X, I want to use the following code in following manner :

<script type="javascript">
var images = new Array();

images[0] = "/images/birds.jpg";
images[1] = "/images/child.jpg";
images[2] = "/images/dolphin1.jpg";
images[3] = "/images/dolphin2.jpg";
images[4] = "/images/fish.jpg";
images[5] = "/images/kayak.jpg";
images[6] = "/images/man.jpg";
images[7] = "/images/pasture1.jpg";
images[8] = "/images/pasture2.jpg";
images[9] = "/images/pasture3.jpg";
images[10] = "/images/runner.jpg";

var rannum = Math.floor(Math.random()*11)
var choice = images[rannum];

</script>

<% String image2 = componentRequest.getWebResourcePath() + "var1"; %>
<% String image1 = componentRequest.getWebResourcePath() + choice;%>

<IMG SRC="<%=image1%>" WIDTH="340" HEIGHT="238" BORDER="0" ALIGN="left">
<IMG SRC="<%=image2%>" WIDTH="360" HEIGHT="238" BORDER="0">

FYI, I have kept all those images in the dist-> images folder.

can you tell me how I can rectiify this here!!!

Thanks in advance

Srikant

[Former Member · Accepted solution]

Hi Srikant,

what is the result in the rendered html page?

regards,

Martin

[Former Member · Accepted solution]

hi martin

the iView is not getting displayed. it gives an iView creation error

regards

Srikant

[Former Member · Accepted solution]

do you have any the error message or the exception?

[Former Member · Accepted solution]

I think the problem is that you mix up client side scripting with server side scripting, right? The first script part is executed on the client while the second part (which ist between <% %>) is executed on the server. The variable "choice" is not available during the time your page is rendered on the server.

[Former Member · Accepted solution]

Hi Srikant,

I didn't quite get what you're trying to pass for the first image? What's inside your var1 variable?

You could do the whole thing by using javascript. First you code your random image function and then you can call it from your page by adding another javascript to the place where you want your images to show up.

Take a look on this example which will show how to show one random image:

<b><i>Here's the javascript for random images which is about the same as yours:</i></b>

<script language="JavaScript">
<!--

var theImages = new Array() // do not change this

theImages[0] = '/images/1.jpg';
theImages[1] = '/images/2.jpg';
theImages[2] = '/images/3.jpg';
theImages[3] = '/images/4.jpg';
theImages[4] = '/images/5.jpg';
theImages[5] = '/images/6.jpg';

var j = 0;
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer<i> = new Image()
   preBuffer<i>.src = theImages<i>
}

var whichImage = Math.round(Math.random()*(p-1));

//-->
</script>

<b><i>Put this code on the page where you want the random image to show up:</i></b>

<script language="JavaScript">
<!-- 
document.write('<img src="'+theImages[whichImage]+'">');
//-->
</script>

Regards,

Ville

[Former Member · Accepted solution]

Hi Ville

This has been useful post for me but still i'm not able to display the image.

I've written the following code:

<script type="javascript">
var images = new Array();

images[0] = '/images/birds.jpg';
images[1] = '/images/child.jpg';
images[2] = '/images/dolphin1.jpg';
images[3] = '/images/dolphin2.jpg';
images[4] = '/images/fish.jpg';
images[5] = '/images/kayak.jpg';
images[6] = '/images/man.jpg';
images[7] = '/images/pasture1.jpg';
images[8] = '/images/pasture2.jpg';
images[9] = '/images/pasture3.jpg';
images[10] = '/images/runner.jpg';

var j = 0;
var p = images.length;
 
var preBuffer = new Array()
for (j = 0; j < p; j++)
{
   preBuffer = new Image()
   preBuffer.src = images
}
 
var whichImage = Math.round(Math.random()*(p-1));

</script>




<% String image1 = componentRequest.getWebResourcePath() + images(whichImage)%>


<IMG SRC="<%=image1%>" WIDTH="235" HEIGHT="238" BORDER="0">

Can you please let me know where I'm going wrong??[

Thanks in advance

Srikant

P.S. 10X for your help

[Former Member · Accepted solution]

This might help you:

http://www.davelozinski.com/scripts/random_image/index.php?1128183384359

Regards.

[Former Member · Accepted solution]

Hi Srikant,

Your image should appear on the page if you use the codes I posted above. You just place the last bit of code where you want the image to appear.

But if you want to use also server side code in your your random image display you can take a look on the page Peter just posted. There's a full example how to get the random image working in .jsp:

http://www.davelozinski.com/scripts/random_image/random_image2.jsp.txt

Regards,

Ville

[Dan_Wroblewski · Accepted solution]

Hi Srikant,

You are still mixing your server and client-side scripting.

-

---

As Ville said, replace:

<% String image1 = componentRequest.getWebResourcePath() + images(whichImage)%>

<IMG SRC="<%=image1%>" WIDTH="235" HEIGHT="238" BORDER="0">

with

<script language="JavaScript">

<!--

document.write('<img src="'theImages[whichImage]'">');

//-->

</script>

-

---

Hope this helps.

Daniel

[former_member248784]

Hi,

what are you trying to achieve?

You render static images on the page and some JavaScript

that holds a collection of URL's to other images.

From this collection you basically pick 1 with the Math.random() call and store the url in a variable choice. Well... storing a URL string in a variable does usually not make any Image Object visible.

If you want to apply the image to an existing image on the page you have to do that via JavaScript,

basically like this:

<script type="javascript">
var images = new Array();
 
images[0] = "/images/birds.jpg";
images[1] = "/images/child.jpg";
images[2] = "/images/dolphin1.jpg";
images[3] = "/images/dolphin2.jpg";
images[4] = "/images/fish.jpg";
images[5] = "/images/kayak.jpg";
images[6] = "/images/man.jpg";
images[7] = "/images/pasture1.jpg";
images[8] = "/images/pasture2.jpg";
images[9] = "/images/pasture3.jpg";
images[10] = "/images/runner.jpg";
 
var rannum = Math.floor(Math.random()*11)
var choice = images[rannum];
<b>document.getElementById("myimage1").src=choice;
document.getElementById("myimage2").src=choice;</b> 
</script>
 
<% String image2 = componentRequest.getWebResourcePath() + "/images/insidetrack3.gif"; %>
<% String image1 = componentRequest.getWebResourcePath() + "/images/pasture1.jpg";%>
 
<IMG <b>id=myimage1</b> SRC="<%=image1%>" WIDTH="340" HEIGHT="238" BORDER="0" ALIGN="left">
<IMG <b>id=myimage2</b> SRC="<%=image2%>" WIDTH="360" HEIGHT="238" BORDER="0">

If you like to do the random part on the server side you should also have you Array of URL's and the random call on the server side.

Best Regards

Martin