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属性变得无关紧要。

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

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

点击任何 html 缩略图后，我们将按以下步骤操作：

获取所点击图片的索引（data-order属性）
使用 class fancybox收集所有html元素（querySelectorAll()）
初始化元素数组的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 类型一样向脚本添加任何fancybox选项。另请注意，我已将order添加到标题以用于说明目的，以便您可以验证图库是否按照data-order属性设置的顺序显示。

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

参见 JSFIDDLE

在库中重新排序fancybox项目

1 个答案: