Question

我正在使用fancybox来显示图片库。

我有这个布局：

    <div class="avatar">
        <a class="avatar-item" data-fancybox="group" data-caption="Caption #1" href="img/avatars/jessica1.jpeg">
            <img src="./img/avatars/jessica1.jpeg" width="145" height="145" alt="">
        </a>
        <a class="avatar-item" data-fancybox="group" data-caption="Caption #2" href="img/avatars/jessica2.jpeg">
            <img src="./img/avatars/jessica2.jpeg" alt="">
        </a>
    </div>

当我点击预览时 - 会出现图库弹出窗口，但它会显示 4 图像而不是 2 。我通过数据属性包括fancybox，没有javascript。尝试画廊选项的巨大弹出窗口 - 得到相同的结果。链接href属性值和内部图片src属性相同。我没有缩略图，用css裁剪显示图像。

嘻嘻是CSS：

.avatar {
    &.slick-dotted.slick-slider {
        margin-bottom: 0;
    }
    a.avatar-item {
        width: 146px;
        height: 146px;
        display: inline-block;
    }
    width: 146px;
    height: 146px;
    border: 4px solid #FFF;
    float: left;
    position: relative;
    overflow: hidden;
    img {
        height: 100%;
    }
}

Answer 1

发现问题。我使用slick-slider之前使用infinite：true参数，这会创建一个额外的幻灯片，所以我得到了幻灯片x2

Answer 2

我扩展了_run函数。现在，从图库中删除了重复的图像，并且仍然返回了正确的密钥。此外，我还可以通过data-facybox位置以任何顺序排列图像。

因此也可以使用光滑滑块的无穷大版本。

function _run(e, opts) {
  var tempItems,
    items       = [],
    newItem,
    reOrder,
    duplicates  = false,
    pos,
    index       = 0,
    $target,
    value,
    instance;

// Avoid opening multiple times
  if (e && e.isDefaultPrevented()) {
    return;
  }

  e.preventDefault();

  opts = opts || {};

  if (e && e.data) {
    opts = mergeOpts(e.data.options, opts);
  }

  $target = opts.$target || $(e.currentTarget).trigger("blur");
  instance = $.fancybox.getInstance();

  if (instance && instance.$trigger && instance.$trigger.is($target)) {
    return;
  }

  if (opts.selector) {
    tempItems = $(opts.selector);
  } else {
    // Get all related items and find index for clicked one
    value = $target.attr("data-fancybox") || "";
    if (value) {
      tempItems = e.data ? e.data.items : [];
      tempItems = tempItems.length ? tempItems.filter('[data-fancybox="' + 
      value + '"]') : $('[data-fancybox="' + value + '"]');
    } else {
      tempItems = [$target];
    }
  }

  if (tempItems.length > 1) {
    $.each(tempItems, function(key, item) {  // prevents duplicate images in the gallery
      newItem = false;
      if (typeof item !== 'undefined') {
        if (items.length > 0) {
          var found = items.filter(function (items) { return items.href == 
          item.href });
          if (found.length == 0) {
            newItem     = true;
          } else {
            duplicates  = true;
          }
        } else {
          newItem = true;
        }
      }
      if (newItem) {
        // Sort if the attribute data-fancybox-pos exists
        if ($(item).data('fancybox-pos')) {
          reOrder = true;
          pos     = $(item).data('fancybox-pos') - 1;
          if (pos in items) {
            tempItem    = items[pos];
            items[pos]  = item;
            items.push(tempItem);
          } else {
            items[pos]  = item;
          }
        } else {
          items.push(item);
        }
      }
    });
  } else {
    items = tempItems;
  }

  if (duplicates || reOrder) {
    // find correct index if there were duplicates
    $.each(items, function(key, item) {
      if (item.href == $target[0].href) {
        index = key;
      }
    });
  } else {
    index = $(items).index($target);
  }

  // Sometimes current item can not be found
  if (index < 0) {
    index = 0;
  }

  instance = $.fancybox.open(items, opts, index);

  // Save last active element
  instance.$trigger = $target;
}

fancybox错误的图像数量与光滑的滑块

2 个答案: