cancel
Showing results for 
Search instead for 
Did you mean: 

Random display of images!!

Former Member
0 Kudos

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

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi,

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

Former Member
0 Kudos

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
0 Kudos

Hi Srikant,

what is the result in the rendered html page?

regards,

Martin

Former Member
0 Kudos

hi martin

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

regards

Srikant

Former Member
0 Kudos

do you have any the error message or the exception?

Former Member
0 Kudos

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
0 Kudos

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
0 Kudos

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
Former Member
0 Kudos

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

thecodester
Developer Advocate
Developer Advocate
0 Kudos

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

Answers (1)

Answers (1)

0 Kudos

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