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

Post a Comment

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

Image
in fullcalendar, how format date used in popover widget title when clicking '+n more'? code: <div class="fc-popover fc-more-popover"> <div class="fc-header fc-widget-header"> <span class="fc-close fc-icon fc-icon-x"></span> <span class="fc-title">tuesday, april 7</span> ... </div> ... </div> you use daypopoverformat that. determines date format of title of popover created eventlimitclick option. must date formatting string. default value "dddd, mmmm d" english , "ll" other languages.
Read more

Bubble Sort Manually a Linked List in Java -

Image
this first question here. trying manually sort linked list of integers in java , can not figure out wrong code. suggestions? don't error, still have output unordered. tried few different ways, nothing worked. appreciate if can me that. public class node { int data; node nextnode; public node(int data) { this.data = data; this.nextnode = null; } public int getdata() { return this.data; } } // node class public class datalinkedlist implements datainterface { private node head; private int size; public datalinkedlist(){ this.head = null; this.size = 0; } public void add(int data) { node node = new node(data); if (head == null) { head = node; } else { node currentnode = head; while(currentnode.nextnode != null) { currentnode = currentnode.nextnode; } currentnode.nextnode = node; ...
Read more

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a...
Read more