...

View Full Version : Combine random image with pop up window



JCOMPANYDESIGN
05-26-2009, 07:28 PM
I need to know how to create a pop up window that displays a random image when opened. I need it to open as a result of an onclick event.

Do I need to create a list array at the head of the doc naming all the images, and then an array displaying the link to each image? Do those images need to be a new page for each of them, basically a new html page for each image?

I think I can do this, but how do you combine it to open in a pop up window onclick? What does the code look like in the head, and at the point of the onclick?

Is there a better way to do this? Yes I am a noob on the dev side of things..lol

Any help on these scripts would be much appreciated.

Thanks and Blessings!

Fou-Lu
05-26-2009, 09:47 PM
I assume (by the sounds of this) you're asking for Javascript.
Despite the simliar sounding names, Java is not the same as (or even related to) Javascript.
Moving to the Javascript forum.

Old Pedant
05-26-2009, 10:29 PM
Do I need to create a list array at the head of the doc naming all the images
Don't have to, but that's probably the easiest and best way. Another option is to simply give all your images a "regular" name that is different only by the numeric part of the name. Example: "pic0.jpg", "pic1.jpg", "pic2.jpg", etc.

, and then an array displaying the link to each image?
Not unless you WANT a link to each image. How do you reconcile that with the desire to *randomly* pop up one of the imaes?

Do those images need to be a new page for each of them, basically a new html page for each image?
No. You can popup a raw image. Won't necessarily look pretty, but you can do it.



<html>
<head>
<script type="text/javascript">
var pix = ["prettyScene.jpg","uglyPeople.jpg","zamboni.jpg","NYCSubway.jpg"];

function poppic( )
{
var random = Math.floor( pix.length * Math.random() );
window.open( pix[random], "POPUPPIX", "height=600,width=800" );
}
</script>
</head>
<body>
....
<a href="#" onclick="poppic(); return false;">Pick a random picture</a>
...
</body>
</html>


If you named your images sequentially ("pix0.jpg", etc.) then it's even easier:


<html>
<body>
...
<a href="#"
onclick="window.open('pix'+Math.floor(10*Math.random())+'.jpg',
'POPUP',
'width=800;height=600');
return false;">
pick a random image from 0 to 9</a>
...
</body>
</html>

In the last example, change the hard coded value of 10 to match the number of images, where they are numbered from 0 to one less than your chosen number.

JCOMPANYDESIGN
05-27-2009, 01:38 PM
In your last option would the images be housed in the array in the head of the doc? This is what I assume. Would you mind too terribly to show me what that would look like?

Is it possible to house the images in their own folder? And then just add them using sequential values each time? I assume if this was done you would need to change the hard code values to reflect this as well.

I appreciate this!

JCOMPANYDESIGN
05-27-2009, 06:44 PM
I got this working and it works great! Thank you Old Pedant, and greetings to you out there in WA. We just moved from the Seattle area last year back to the midwest. I guess you are getting ready for the best weather of the year!

Thanks again!

Old Pedant
05-27-2009, 08:58 PM
Since you have it working, you probably don't need this answer, but...

In your last option would the images be housed in the array in the head of the doc?
No, if the images are numbered you don't need any array.

And to use some other directory, just use that as part of the code:

<html>
<body>
...
<a href="#"
onclick="window.open('/path/to/images/pix'+Math.floor(10*Math.random())+'.jpg',
'POPUP',
'width=800;height=600');
return false;">
pick a random image from 0 to 9</a>
...
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum