Question

我正在使用Fancybox v2.0.5和一组图像，并希望以随机顺序显示整组图像。我尝试了各种jQuery shuffle脚本，但它们似乎没有与Fancybox集成。

我想用jQuery而不是php或其他服务器端脚本来做这件事。

有什么建议吗？

Answer 1

您可以随机使用数组中的数组和弹出值，直到没有剩余，通过自定义插件randomiseGallery完成：

<强> HTML ：

<div id="fancyDiv">
    <a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg" title="Westfield Waterfalls - Middletown CT Lower (Graham_CS)">
        <img src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg" title="Calm Before The Storm (One Shoe Photography Ltd.)">
        <img src="http://farm4.staticflickr.com/3824/9041440555_2175b32078_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg" title="Lambs Valley (JMImagesonline.com)">
        <img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg" title="Grasmere Lake (Phil 'the link' Whittaker (gizto29))">
        <img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt="" />
    </a>
</div>

<强>的jQuery ：

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        helpers: {
            thumbs: {
                width  : 40,
                height : 40,
                source  : function(current) {
                    return $(current.element).data('thumbnail');
                }
            }
        }
    });

(function($){
    $.fn.randomiseGallery = function() {
        return this.each(function() {                        
            var $this = $(this);
            var obj = $(this).children('a');
            var arr = $.makeArray(obj);           
            arr.sort(function() {return 0.5 - Math.random()});           
            $this.empty().show();
            arr.push("");

            var delay = 50;

            $.each(arr, function(key, val) {
                $this.append(val);
                $this.children('a').hide().fadeIn(600).delay(delay * key);
            });

        });

    };
})(jQuery);

$('#fancyDiv').randomiseGallery();

<强> JSFiddle

Answer 2

我想你想要随机幻灯片放映的这个功能在后台运行。

不幸的是 javascript 没有与php的shuffle()函数相同的功能。但是，您可以使用任何javascript改编的Fisher-Yates算法对javascript进行随机排序。

让我们从https://stackoverflow.com/a/6274398/1055987

中选择一个

function shuffle(array) {
    // Fisher-Yates shuffle for javascript
    // as in https://stackoverflow.com/a/6274398/1055987
    var counter = array.length, temp, index;
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);
        // Decrease counter by 1
        counter--;
        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }
    return array;
}

我们将使用上面的函数随机化到我们的（手动构建的）库并使用fancybox提供它，因此不需要任何html而是fancybox触发器

<a class="fancybox" href="javascript:;">open random gallery</a>

然后画廊将存储在像

这样的数组中

var gallery = [{
    href: "http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg",
    title: "Westfield Waterfalls - Middletown CT Lower (Graham_CS)"
}, {
    href: "http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg",
    title: "Calm Before The Storm (One Shoe Photography Ltd.)"
}, {
    href: "http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg",
    title: "Lambs Valley (JMImagesonline.com)"
}, {
    href: "http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg",
    title: "Grasmere Lake (Phil 'the link' Whittaker (gizto29))"
}];

...我们会在每次点击触发器（.fancybox选择器）时将其随机化，如：

jQuery(document).ready(function($) {
    $(".fancybox").on("click", function () {
        $.fancybox(shuffle(gallery), {
            //API options
            type: "image"
        });
    }); // on                
}); // ready

参见 JSFIDDLE

注意：我不确定这是否是你要找的，但我发现这个练习很有趣，最终对其他人应用很有用。

Fancybox随机显示图像

2 个答案: