javascript - 在 WordPress 上使用 Kenb (Ken Burns) Slider - 如何使幻灯片以随机顺序加载

Question

我在 WordPress 上使用 Kenb 效果 slider 。我希望幻灯片以随机顺序加载。这可能吗？

我认为这是下面的相关js。您还可以访问该网站: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;
    }

这是在主题的 function.php 文件中:

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

Answer 1

初始化 slider 时，您将传递一个图像数组(称为images)作为选项，因此如果您随机化该列表，您将获得不同的顺序。

您可以通过 PHP 使用 shuffle() 来完成此操作(当您输出脚本代码并传递图像数组时):

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

或者，如果您想在 Javascript 代码中执行此操作，您可以使用此方法:

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

请参阅以下示例:

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>

更新

看到更新问题中的新代码，您可以将 PHP 部分(images = [ 之后的所有内容)替换为:

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

基本上，此代码不是在每次迭代时仅回显图像路径，而是将路径添加到 $images 数组，然后在回显之前对其进行打乱。