Jquery or php, how to get various images in a div to display randomly?

I have a bunch of images/thumbnails on this page and would like to be able to have them display them in a random order after a refresh, does anyone know how?

I am using wordpress for this site but this is not a gallery otherwise i coul开发者_开发百科d use it in the gallery settings.

Is there a way to do this?

Thanks,

Sat

---

You could use the jqShuffle plugin.

A good place to call it would be inside your functions.js, just before you call Masonry:

$('.rugsAll').jqShuffle();

---

There are two ways of doing it, whether you're using JavaScript or PHP (it doesn't matter which, though the implementation is slightly different).

Either a) make an array of all the images you want to rotate through, or b) use a naming scheme for all the images, like image1.jpg, image2.jpg, etc. Then, in code, you either pick a random array element (using method A) or pick a random number and fit it into your naming scheme (using method B).

In JavaScript, the effect is achieved by putting a placeholder image in your HTML, then, on page load, changing the image src to your randomly-selected image's path.

In PHP, you would set the image src to your randomly-selected image path as the page is being generated; this is how I usually do it, though I haven't done it in WordPress specifically.

---

I don't know how the images are loaded and saved on your site. In this PHP solution the images should be saved in an array $images

$images = array( 'path/image1.jpg', 'path/image2.jpg', /* ... */ );

for( $i = 0, $i <= count($images)-1, $i++){

     $n = rand( $i, count($images)-1 );

     // display image or something

     unset( $images[$n] );
     $images = array_merge( array(), $images );
}