重新排序图库中的 fancybox 项目

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 画廊。

首先，您需要为每个html元素添加一个data属性，以设置它们在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 属性变得无关紧要。

其次，您需要绑定一个 click 事件来创建和启动 fancybox 画廊，而不是使用常规的 fancybox 初始化脚本 $(".fancybox").fancybox()：

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

一旦我们点击任何html缩略图，我们将进行如下操作：

获取点击图片的索引（data-order属性）
用 class fancybox (querySelectorAll())
初始化元素数组的花式框画廊
遍历 html 元素并将它们推入 fancybox 画廊数组
对 fancybox 数组进行排序

由于 fancybox 画廊对象将是对象的数组，我们需要一个函数来按选定的属性对此类数组进行排序。我们将从 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;
});

请注意，您可以像我对 title 类型所做的那样，向脚本添加任何 fancybox 选项。另请注意，出于说明目的，我将 order 添加到 title，以便您可以验证画廊是否按照 data-order 属性设置的顺序显示.

顺便说一句，fancybox 不需要 order 属性但我们只用它来对数组进行排序。

见JSFIDDLE

重新排序图库中的 fancybox 项目

Reorder fancybox items in gallery

html

javascript

css

jquery

fancybox-2