title: Javascript slideshow in random order
body: <p>My slideshow displays images in an non-random order at the moment, but I'd like it to be random.</p>
  
  <p>jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/6hCaJ/" rel="nofollow">http://jsfiddle.net/6hCaJ/</a></p>
  
  <p>Javascript:</p>
  
  <pre><code>function loadNextImage(useRandomSelection) {    
      if(imagePool.length &gt; 0) {
          if(useRandomSelection) {
              var randomIndex = Math.floor(Math.random() * imagePool.length);
              var imgData = imagePool.splice(randomIndex,1);
          } else {
              var imgData = imagePool.shift();
          }
  
          $(".back-image-container").append("&lt;img id='back-image-" + imgData.id + "' class='back-image' src='" + imgData.url + "'/&gt;");
  
          var imgObj = $("#back-image-" + imgData.id);        
          imgObj.hide();
  
          if ( imgObj.complete || imgObj.readyState == 4 || imgObj.readyState == "complete") {
              loadCompleted(imgObj,useRandomSelection);
          } else {
              imgObj.load(function() {
                  loadCompleted(imgObj,useRandomSelection);     
              });
          }
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="back-image-container"&gt;
      &lt;img id="back-image-0" class="back-image" src="http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/product_images/theme_images/scorpiongoldberlin.jpg?t=1403886381" style="width: 1347px; height: 898px; left: -63px; display: inline;"&gt;
      &lt;img id="back-image-1" class="back-image" src="http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/product_images/theme_images/brelingirlcross2.jpg?t=1403886381" style="width: 1347px; height: 898px; left: -63px; display: none;"&gt;
      &lt;img id="back-image-2" class="back-image" src="http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/product_images/theme_images/brelinafternoon.jpg?t=1403886381" style="width: 1347px; height: 898px; left: -63px; display: none;"&gt;
  &lt;/div&gt;
  </code></pre>