title: cycling images in jQuery - randomize it?
body: <p>I've got a site that has a div that has some images:</p>
  
  <pre><code> &lt;div class="slideshow"&gt;
              &lt;img src="lib/images/grid/slideshow/a-960x305/a_pic1.jpg" width="960" height="305" alt="1" class="first" /&gt;
              &lt;img src="lib/images/grid/slideshow/a-960x305/a_pic2.jpg" width="960" height="305" alt="2" /&gt;
              &lt;img src="lib/images/grid/slideshow/a-960x305/a_pic3.jpg" width="960" height="305" alt="3" /&gt;
              &lt;img src="lib/images/grid/slideshow/a-960x305/a_pic4.jpg" width="960" height="305" alt="4" /&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Notice the first image has a class name called first.  This is so the page only shows one image at a time via css:</p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>/*begin slideshow*/
  div.slideshow                              { margin:0 0 5px 0; /*height:305px;*/ } /*for the jQuery cycle plug in*/
  div.slideshow img                          { display:none;}
  div.slideshow img.first                    { display:block;}
  .caption                                   { text-align:center; font-weight:bold; color:#1F7FB6;}
  /*end slideshow*/
  </code></pre>
  
  <p>I am using the jquery cycle library to cycle through the images like so:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $('.slideshow').cycle({
                  fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                  timeout: 7000,
                  after: function () {
                      $('.caption').html(this.alt);
                  }
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>The issue is the page will of course always start with the first image, is there a way to randomize this a bit so that it can start a random image rather then always starting with <code>a_pic1.jpg</code> ?</p>