Using Kenb (Ken Burns) Slider on WordPress – How to make slides load in random order

1 Views

I’m using the Kenb effect slider on WordPress. I would like the slides to load in a random order. Is that possible?

I think this is the relevant js below. You can also see the site at: http://goo.gl/yBGZAk

Read More
(function($){

$.fn.kenburns = function(options) {

    var $canvas = $(this);
    var ctx = this[0].getContext('2d');
    var start_time = null;
    var width = $canvas.width();
    var height = $canvas.height();  

    var image_paths = options.images;       
    var display_time = options.display_time || 7000;
    var fade_time = Math.min(display_time / 2, options.fade_time || 1000);
    var solid_time = display_time - (fade_time * 2);
    var fade_ratio = fade_time - display_time
    var frames_per_second = options.frames_per_second || 30;        
    var frame_time = (1 / frames_per_second) * 1000;
    var zoom_level = 1 / (options.zoom || 2);
    var clear_color = options.background_color || '#000000';    

    var images = [];
    $(image_paths).each(function(i, image_path){
        images.push({path:image_path,
                     initialized:false,
                     loaded:false});
    });     
    function get_time() {
        var d = new Date();
        return d.getTime() - start_time;
    }

And this is in the theme’s function.php file: 

function kenres() {
        jQuery('#kenburns').kenburns({
            //Functionality

                images: [
                <?php   $tti = 0; while (have_posts()): the_post(); ?>
                    <?php if ($tti)
                        echo ',';
                    $tti++;
                    $full = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
                    $title = get_post_meta(get_the_ID(), '_slide_title_value', true);
                    echo "'";
                    echo $full[0];
                    echo "'" ?>                  
                     <?php endwhile ?>
                     <?php wp_reset_query(); ?>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. When you initialize the slider, you pass an array of images (called images) as option, so if you randomize that list you’ll have your different order.

    You can do that via PHP (when you output the code of your script and you pass the array of images) with shuffle():

    $images = array('image1.jpg', 'image2.jpg', 'image3.jpg');
shuffle( $images );

    Or if you want to do it inside you Javascript code you can use this method:

    ['image1.jpg', 'image2.jpg', 'image3.jpg'].sort(function() { return 0.5 - Math.random() });

    See the following example:

    var random = [
  
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  'image4.jpg',
  'image5.jpg',

].sort(function() { return 0.5 - Math.random() });


document.getElementById('output').innerHTML = random;
    <div id="output"></div>

    Update

    Seeing the new code in the updated question, you could replace the PHP part (everything after images = [) with this:

    <?php
$images = array();
while (have_posts()): the_post();
    $full = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
    $title = get_post_meta(get_the_ID(), '_slide_title_value', true);
    $images []= "'{$full[0]}'";
endwhile;
wp_reset_query();

shuffle($images);
echo implode(',', $images);
?>

    Basically instead of just echoing the image path on every iteration, this code adds the path to the $images array and then shuffles it before echoing.