Fancybox随机显示图像

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算法来随机排列您的图库。

让我们这一个从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

注意：我不知道这是什么你正在寻找，但我发现这个练习很有趣，并最终对其他人的应用程序有用。