在圖庫中對花式框項目進行重新排序

Question

默認情況下，它看起來像fancybox按照它們在HTML中添加的順序獲取圖庫中的項目。

是否有另一種選擇，通過添加可選的data-屬性，它會在打開它們時重新排序，但當它們顯示在頁面中時（不在圖庫彈出窗口中），它們將保持不變？

的代碼看起來是這樣的：

<a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg" title="Morning Godafoss (Brads5)"> 
    <img src="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_m.jpg" alt="" /> 
</a> 
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg" title="Vertical - Special Edition! (cedarsphoto)"> 
    <img src="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg" alt="" /> 
</a> 
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg" title="Racing against the Protons (tom.leuzi)"> 
    <img src="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_m.jpg" alt="" /> 
</a> 
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg" title="Lupines (Kiddi Einars)"> 
    <img src="http://farm1.staticflickr.com/291/18653638823_a86b58523c_m.jpg" alt="" /> 
</a> 

而且JS：

$(".fancybox").fancybox(); 

JSFiddle

如何保持相同的HTML代碼，但在彈出的打開它們以下順序：3，1，4，2（例如）？

我想是這樣的：

<a class="fancybox" rel="gallery1" data-fancybox-order="3" ... > 
<a class="fancybox" rel="gallery1" data-fancybox-order="1" ... > 
<a class="fancybox" rel="gallery1" data-fancybox-order="4" ... > 
<a class="fancybox" rel="gallery1" data-fancybox-order="2" ... > 

那麼，如果我們在彈出的打開第二圖像（data-fancybox-order="1"），就不會有一個按鈕。但是如果我們點擊下一步，它會打開第四個圖像。然後，再次點擊下一步後，它會打開第一張圖片，然後打開第三張圖片（data-fancybox-order="4"）。在那一刻，下一個按鈕將消失。

乾淨的方法是什麼？

Answer 1

不幸的是，fancybox不提供該選項。您可能需要按照您想要的順序以編程方式創建並啓動fancybox圖庫。

首先，你需要一個data屬性添加到每個HTML元素設置，他們將被顯示在的fancybox畫廊的順序，是這樣的：

<a class="fancybox" href="image03.jpg" title="title 3" data-order="3">... 
<a class="fancybox" href="image01.jpg" title="title 1" data-order="1">... 
<a class="fancybox" href="image04.jpg" title="title 4" data-order="4">... 
<a class="fancybox" href="image02.jpg" title="title 2" data-order="2">... 

需要注意的是，由於畫廊將以編程方式構建，rel屬性變得無關緊要。

二，而不是使用常規的fancybox初始化腳本$(".fancybox").fancybox()需要綁定一個click事件創建和啓動的fancybox畫廊：當我們單擊任何HTML縮略圖

$(".fancybox").click(function(){ 
    // build fancybox gallery here 
    return false; // prevent event default and propagation 
}); 

，我們將按以下步驟操作：

• 獲取點擊圖像的索引（data-order屬性）
• 收集所有HTML元素與類fancybox（querySelectorAll()）
• 初始化元件陣列的所述的fancybox畫廊迭代通過HTML元件
• 並且將它們推入的fancybox庫陣列
• 排序的fancybox陣列

由於的fancybox畫廊對象將對象的陣列，我們需要一個函數爲s通過選定的屬性來排序這樣的數組。我們將借用this answer該函數：

// sort array of objects by a property 
var sortObjectsBy = function(field, reverse, primer) { 
    var key = primer ? function(x) { 
    return primer(x[field]) 
    } : function(x) { 
    return x[field] 
    }; 
    reverse = !reverse ? 1 : -1; 
    return function(a, b) { 
    return a = key(a), 
     b = key(b), 
     reverse * ((a > b) - (b > a)); 
    } 
} 

然後我們就會把所有的作品一起click事件之後：

$(".fancybox").on("click", function() { 
    // get the index of the clicked image 
    var thisIndex = this.dataset.order - 1; 
    // gather all html elements 
    var elements = document.querySelectorAll(".fancybox"); 
    // initialize fancybox gallery array 
    var fancyElements = []; 
    // push the html elements into fancybox gallery 
    for (var i = 0, elLength = elements.length; i < elLength; i++) { 
    fancyElements.push({ 
     href: elements[i].href, 
     title: elements[i].title + " - " + elements[i].dataset.order, 
     order: elements[i].dataset.order 
    }); 
    } 
    // sort the fancybox array of objects by the "order" property 
    fancyElements.sort(sortObjectsBy("order", false, function(a) { 
    return a; 
    })); 
    // launch fancybox programmatically 
    $.fancybox(fancyElements, { 
    helpers: { 
     title: { 
     type: "inside" 
     } 
    }, 
    // force index 
    index: thisIndex // start gallery from the clicked element 
    }) 
    return false; 
}); 

請注意，您可以添加任何的fancybox選項劇本，因爲我做了與標題類型。另請注意，我將order添加到標題用於說明目的，因此您可以驗證該圖庫是以data-order屬性設置的順序顯示的。

順便說一句，order屬性不是fancybox需要的，但我們用它來排序數組。

見JSFIDDLE