Javascript Fancybox随机显示图像

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

我希望使用jQuery而不是php或其他服务器端脚本来实现这一点

---

有什么建议吗？

您可以使用一个数组，通过自定义插件

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>

$(".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();

---

我猜您希望在后台左右运行随机幻灯片的此功能

不幸的是，javascript没有与php的

shuffle（）

函数等价的函数。不过，您可以使用任何一种javascript自适应算法对库进行随机排序

让我们把这个从

我们将使用上面的函数随机分配到我们的（手动构建的）图库，并使用fancybox为其提供服务，因此除了fancybox触发器之外，不需要任何html

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

。。。我们将在每次单击触发器（

.fancybox

选择器）时将其随机化，如下所示：

看

---

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

第一个建议，展示您迄今为止所做的尝试：）很好，但是我想知道问题是“如何洗牌html”还是“如何洗牌fancybox库…仅此而已”这看起来是一个很好的解决方案；我认为对我来说，shuffle-the-html更有意义，因为当前的Fancybox图库有20多个图像，没有缩略图，从单击链接开始。20多个图像只是带有href的“a”标记。它们的样式为“display:none”，因此这些标记所在的页面上没有空白。我将在未来几天内试一试。非常感谢！

<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))"
}];

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