Question

I’ve got a site that has a div that has some images:

 <div class="slideshow">
            <img src="lib/images/grid/slideshow/a-960x305/a_pic1.jpg" width="960" height="305" alt="1" class="first" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic2.jpg" width="960" height="305" alt="2" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic3.jpg" width="960" height="305" alt="3" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic4.jpg" width="960" height="305" alt="4" />
  </div>

Notice the first image has a class name called first. This is so the page only shows one image at a time via css:

Here’s the CSS:

/*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*/

I am using the jquery cycle library to cycle through the images like so:

 <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                timeout: 7000,
                after: function () {
                    $('.caption').html(this.alt);
                }
            });
        });
    </script>

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 a_pic1.jpg ?

Answer 1

set the random to 1 in the jQuery cycle options

random: 0, // true for random, false for sequence (not applicable to shuffle fx)

$(document).ready(function () {
    $('.slideshow').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout: 7000,
        after: function () {
            $('.caption').html(this.alt);
        },
        random: 1 // <-- add this
    });
});