ansaurus

Question

Answer 1

+1 A:

<script type="text/javascript">// <![CDATA[
var image = [];
var link  = [];

image[0] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus01_small.png';
image[1] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus02_small.png';
image[2] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus03_small.png';
image[3] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus04_small.png';
image[4] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus05_small.png';
image[5] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus06_small.png';
image[6] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus07_small.png';
image[7] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus08_small.png';
image[8] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus09_small.png';
image[9] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus10_small.png';
image[10] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus11_small.png';
image[11] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus12_small.png';
image[12] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus13_small.png';
image[13] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus14_small.png';
image[14] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus15_small.png';
image[15] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus16_small.png';
image[16] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus17_small.png';
image[17] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus18_small.png';
image[18] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus19_small.png';
image[19] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus20_small.png';
image[20] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus21_small.png';
image[21] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus22_small.png';
image[22] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus23_small.png';
image[23] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus24_small.png';
image[24] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus26_small.png';
image[25] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus27_small.png';
image[26] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus28_small.png';
image[27] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus29_small.png';

link[1] = 'http://www.ovlu.li/ornitholog/cms/index.php?page=bildergalerie';
function pickImage(){
   var pick = Math.floor(Math.random()*image.length);
   var img = image.splice(pick, 1);

   document.write('<a href="' + link[1] + '" mce_href="' + link[1] + '"><img src="' + img + '" mce_src="' + img + '" border="0" + width="200" /></a>');
}

pickImage();
pickImage();
//add as much pickImage(); as you want
// ]]></script>

Lekensteyn 2010-08-25 11:30:23

Wouldn't that also result in duplicate images?

Kau-Boy 2010-08-25 11:34:15

Nope, unless you're defining image again.Note that if we're out of images, nothing will be displayed.

Lekensteyn 2010-08-25 15:50:17

Answer 2

+2 A:

I would recommend to shuffle the array with any server side technique. If you get the images from a data base you can use it's randomizing or if you use PHP you can use shuffle(). Then you just have to take the first three images.

EDIT: As you seems to use PHP on that page, try the following:

$images = array('01','02','03','04','05', ... ): // the numbers of the images
shuffle($images):

for($i=0;$i<3;$i++){
    echo "image[".$i."] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus".$images[$i]."_small.png';
}

Insert that into the script tag to only print out three lines of javascript for the array.

Kau-Boy 2010-08-25 11:32:02

Answer 3

+2 A:

A simple way is to remove the picked images from the array:

for (var i = 0; i < 3; i++) {
  var index = Math.floor(image.length * Math.random());
  var picked = image.splice(index, 1)[0];
  document.write(
    '<a href="' + link[1] + '" mce_href="' + link[1] + '">' +
    '<img src="' + picked + '" mce_src="' + picked + '" border="0" + width="200" />' +
    '</a>'
  );
}

Note that I corrected the calculation of the random index. The orignal never picked the first item in the array.

Guffa 2010-08-25 11:41:05

Answer 4

+1 A:

I'd go with Guffa's answer. And I would create the array like this:

var images = [];
for(var i = 0; i < 28 ; i++){
    images[i] =
     'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus' 
       + ( i < 10 ? '0' : '')
       + '_small.png';
}

seanizer 2010-08-25 12:11:50

Thanks. As far as I can see you parse the whole directory to get the images? However this works for this case, but I'd like to extend my script so that all images in the directory http://www.ovlu.li/ornitholog/cms/images/gallery/ and below are used.

Roflcoptr 2010-08-25 12:13:48

you can't parse a directory in javascript. I was relying on the obvious naming convention. If you have one, use it. Otherwise you are going to have to either create the array on the server (by PHP or other) or manually in your html code.

seanizer 2010-08-25 12:18:23

ansaurus

tags:

views:

answers:

While loop in JavaScript

related questions