JQuery looping images - randomize it?

Question

I have a site with a div that has several 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> 

Note that the first image has a class name called the first. This means that the page shows only one image through 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 loop library to loop through images as follows:

  <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 problem is that the page, of course, will always start with the first image, is there a way to randomize it a bit so that it can start a random image and then always start with a_pic1.jpg ?

Answer 1

set random to 1 in jQuery options loop

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 }); }); 

Answer 2

I am not familiar with the loop library, but here is an example using an array:

 <script> var banners = new Array("#banner1","#banner2","#banner3","#banner4"); var counter = //random number between 0-3; $(document).ready(function() { nextBanner(); }); function nextBanner() { var currentBanner = counter; counter++; if (counter > banners.length -1) { counter = 0; } $( banners[currentBanner] ).fadeOut(300 ); setTimeout('$( banners[counter] ).fadeIn( 300)', 100); setTimeout("nextBanner()", 9000); } </script> <div id="banner1" class="banner-item"> <img src="/banner1.jpg" /> </div> <div id="banner2" class="banner-item" style="display: none;"> <img src="banner2.jpg" /> </div> 

..

css

 .banner-item { position: absolute; } 

Answer 3

Have you tried this? I did not try to run this, but you get the point.

 <script type="text/javascript"> $(document).ready(function () { $('.slideshow img').get(random()*($('.slideshow img').length-1)).addClass('first'); $('.slideshow').cycle({ .... 

Answer 4

Before you make your .cycle() call, you can do something like this:

 var images = $('.slideshow > img'); images.get(0).removeClass("first"); images.get(Math.floor(Math.random() * images.length)).addClass("first"); 

Answer 5

Leave the class = 'first' bit and then run this code to randomize the image that first gets class = "

 $(function(){ var rnd = Math.floor(Math.random() * $('.slideshow img').length); $('.slideshow img').eq(rnd).addClass("first"); });