How to randomize images in marquee

Question

Is there anyone who can help me out with this. It’s about a marquee shortcode in wordpress. The marquee code shows uploaded images on date order. I was wondering whether I could make the images slide randomly. So that no matter what date I upload a picture, with every page view , the order of sliding images will change every time.

Here's the code:

$out .= '" id="_'.$menu_id.'" style="background-color:'.$background_color.'">'."\n";
$out .= ' <div class="shadow"></div>'."\n";
$out .= '   <div class="content">'."\n";
$out .= '       <div class="text">'.balanceTags($content).'</div>'."\n";
$out .= '       <div class="marquee-outer">'."\n";
$out .= '           <ul class="marquee-inner">'."\n";

$images_array = explode(',', $images);
foreach($images_array as $image_id){
    $image = wp_get_attachment_image_src($image_id, 'full');
    $out .= '   <li class="marquee-item" style="background-image:url('.$image[0].');"></li>';  
}
$out .= '           </ul>'."\n";
$out .= '       </div>'."\n";
//$out .= ' </div>'."\n";
//$out .= '</section>'."\n";

  return $out;
}

Any ideas?

Answer 1

Use the PHP shuffle function to randomise the array:

$out .= '" id="_'.$menu_id.'" style="background-color:'.$background_color.'">'."\n";
$out .= ' <div class="shadow"></div>'."\n";
$out .= '   <div class="content">'."\n";
$out .= '       <div class="text">'.balanceTags($content).'</div>'."\n";
$out .= '       <div class="marquee-outer">'."\n";
$out .= '           <ul class="marquee-inner">'."\n";

$images_array = explode(',', $images);
shuffle($images_array);
foreach($images_array as $image_id){
    $image = wp_get_attachment_image_src($image_id, 'full');
    $out .= '   <li class="marquee-item" style="background-image:url('.$image[0].');"></li>';  
}
$out .= '           </ul>'."\n";
$out .= '       </div>'."\n";
//$out .= ' </div>'."\n";
//$out .= '</section>'."\n";

  return $out;

}