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

3 comments

1. 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();
   

   Log in to Reply

2. 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.

   Log in to Reply

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

   Log in to Reply