在图库中对花式框项目进行重新排序

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