重新排序画廊中的花式框项目

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属性）
• 用classfancybox(querySelectorAll())收集所有html元素
• 初始化元素数组的fancybox库
• 遍历 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 类型所做的那样，向脚本添加任何花式框选项。另请注意，我将order 添加到标题 以进行说明，以便您可以验证画廊是否按照data-order 属性设置的顺序显示。

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

见JSFIDDLE