How can I randomize images without repeat in a highslide gallery?

Question

So far I've done an amazing job at integrating randomization with my highslide gallery. But now I'm trying to make it so that they don't repeat. Any suggestions? I've looked at several other posts, but can't seem to apply it to my code correctly. I'm still learning; you'll have to forgive me.

Here's my head code (javascript):

var gallery = new Array();
gallery[0] = new Array("earlywork001.jpg","earlywork002.jpg","earlywork003.jpg");

function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write('<a href="images/earlywork/' + gallery[whichGallery][idx] + '" class="highslide" onclick="return hs.expand(this, config1 )"><img src="images/earlywork/' + gallery[whichGallery][idx] + '" width="140" height="140"></a>');
}

Here's my body code (I only put 3 to make it simple, but I actually have 50 images):

<div class="highslide-gallery"><script language="javascript">pickImageFrom(0);</script>
    <span class="highslide-heading"><i>Copyright © 2012 KD Neeley</i></span></div>

<div class="highslide-gallery"><script language="javascript">pickImageFrom(0);</script>
    <span class="highslide-heading"><i>Copyright © 2012 KD Neeley</i></span></div>

<div class="highslide-gallery"><script language="javascript">pickImageFrom(0);</script>
    <span class="highslide-heading"><i>Copyright © 2012 KD Neeley</i></span></div>

Are you trying to randomize without repeat from one page visit to the next page visit or just playing sequential images in a random order within a given page visit? — jfriend00, Aug 12 '12 at 06:56
you may need to keep track of images displayed in a separate array and when selecting an image, pick a random image, if it is not there in the already displayed array, display it or else choose another random. if the list is small, you may consider emptying the array once all the images are displayed. — Senthil Kumar, Aug 12 '12 at 06:58
@SenthilKumar, bad idea. Consider 50 images when you're trying to display all as random. The less images left undisplayed, the more you'll waste iterations waiting for RNG to hit eligible image. Shuffle bellow is the correct one. — Oleg V. Volkov, Aug 12 '12 at 08:19
possible duplicate of [How to randomize a javascript array?](http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array) — Oleg V. Volkov, Aug 12 '12 at 08:20
The highslide gallery pops up the larger images when you click on them, so you never leave the page until you're ready to stop looking at the them. I need the code to randomize on page load. It doesn't necessarily need to remember where they were sitting if they decide to go somewhere else and come back. In fact, I'd rather they don't. Thanks for your help guys! I'm still learning; you'll have to forgive me. — Mike, Aug 12 '12 at 19:44

score 0 · Answer 1 · answered Aug 12 '12 at 08:05

You could add all images to a js array. Make a function that gets an img from the array. Use the function to decide which image to show.

var images = ["img1.jpg","img2.jpg"];
var shownImages = [];

function randomimg(images,shownImages){

   //select a random number from with in the range of the image array
   rand = Math.floor((Math.random()*images.length())+1);
   //store the displayed image in the shown array and remove it from images
   shownImages.unshift(images.splice(rand,rand+1));

   //if the image array is empty 
   //I guess we would like to show the images over again so resetit
   //The commented out part is only necessary if you want to show
   //images in a loop
   /*if(images.length == 0){
     images = shownImages;
     shownImages = [];
   }*/

   //return the image to show this time.
   return shownImages[0];
}

Sorry Pablo, I've been trying to implement this with my code and can't seem to get it to work. Is there any way I can get some help seeing what it would look like? — Mike, Aug 12 '12 at 19:48

Peter · Answer 2 · 2012-08-13T11:49:49.783

Add shuffle to array prototype

Array.prototype.shuffle=function(){
   var i = len = this.length;       
   while (i--) {
      var r = Math.round(Math.random(len));
      var t = this[i];
      this[i] = this[r];
      this[r] = t;
   }
   return this;
}

And then you can use the shuffle method with any array:

gallery.shuffle(); // this shuffles the array

demo: http://jsfiddle.net/W75Kw/1/

Update as requested: Using your posted code:

var gallery = new Array();
gallery[0] = new Array("earlywork001.jpg","earlywork002.jpg","earlywork003.jpg");
gallery[0].shuffle(); // randomize array

function pickImageFrom(whichGallery) {
  var img = gallery[whichGallery].pop(); // extracts element from array
  document.write('<a href="images/earlywork/' + img + '" class="highslide" onclick="return hs.expand(this, config1 )"><img src="images/earlywork/' + img + '" width="140" height="140"></a>');
}

This seems to be the simplest way, but I can't seem to integrate into my code. I want to be able to recall the images in certain areas of the page and not side by side. Can you show me what it would look like? — Mike, Aug 12 '12 at 19:40

How can I randomize images without repeat in a highslide gallery?

2 Answers2