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


i'm using kenb effect slider on wordpress. slides load in random order. possible?

i think relevant js below. can see site at: http://goo.gl/ybgzak

(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 in 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(); ?> 

when initialize slider, pass array of images (called images) option, if randomize list you'll have different order.

you can via php (when output code of script , pass array of images) shuffle():

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

or if want inside javascript code can use method:

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

see 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 new code in updated question, replace php part (everything after images = [) 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 echoing image path on every iteration, code adds path $images array , shuffles before echoing.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -