Search code examples
phprandomslidemarquee

How to randomize images in marquee


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?


Solution

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