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

注意：我不知道這是什麼你正在尋找，但我發現這個練習很有趣，並最終對其他人的應用程序有用。