Javascript fancybox使用光滑滑块时图像数量错误

我正在使用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>

---

发现了问题。我之前使用了flick slider和infinite:true参数，它创建了一个额外的幻灯片，所以我得到了count slides x2

我扩展了_run函数。现在，复制的图像将从库中删除，并且仍然返回正确的密钥。此外，我有可能安排在任何顺序的图像通过数据传真箱的位置

因此，也可以使用光滑滑块的无限版本

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;
}

function\u运行（e，opts）{
所有项目，
项目=[]，
新项目，
重新排序，
重复=错误，
销售时点情报系统，
指数=0，
美元目标，
价值
实例；
//避免多次打开
如果（e&e.isDefaultPrevented（））{
返回；
}
e、 预防默认值（）；
opts=opts |{}；
if（e&e.data）{
opts=合并opts（如数据选项、opts）；
}
$target=opts.$target | |$（e.currentTarget）.trigger（“模糊”）；
instance=$.fancybox.getInstance（）；
if（instance&&instance.$trigger&&instance.$trigger.is（$target））{
返回；
}
如果（选择选择器）{
tempItems=$（opts.selector）；
}否则{
//获取所有相关项并查找已单击项的索引
value=$target.attr（“数据fancybox”）| |“”；
如果（值）{
tempItems=e.data？e.data.items:[]；
tempItems=tempItems.length？tempItems.filter（“[data fancybox=“””+
value+''“]'）：$（'[data fancybox=“'+value+'“]”）；
}否则{
tempItems=[$target]；
}
}
如果（tempItems.length>1）{
$.each（tempItems，function（key，item）{//防止库中出现重复图像
newItem=false；
如果（项目类型！==“未定义”）{
如果（items.length>0）{
var found=items.filter（函数（items）{return items.href==
item.href}）；
if（find.length==0）{
newItem=true；
}否则{
重复=真；
}
}否则{
newItem=true；
}
}
如果（新项目）{
//如果属性数据fancybox pos存在，则进行排序
如果（$（项）.data（'fancybox-pos'））{
重新排序=真；
pos=$（项目）。数据（'fancybox-pos'）-1；
if（项目中的pos）{
tempItem=项目[pos]；
项目[pos]=项目；
items.push（tempItem）；
}否则{
项目[pos]=项目；
}
}否则{
项目。推送（项目）；
}
}
});
}否则{
项目=临时项目；
}
如果（重复项| |重新排序）{
//如果存在重复项，请查找正确的索引
$。每个（项目、功能（键、项目）{
如果（item.href==$target[0].href）{
索引=键；
}
});
}否则{
索引=$（项目）。索引（$目标）；
}
//有时无法找到当前项目
如果（指数<0）{
指数=0；
}
实例=$.fancybox.open（项、选项、索引）；
//保存最后一个活动元素
实例。$trigger=$target；
}

还有你的js代码？css？fancybox版本？fancybox v3.0.47我没有使用javascript触发fancybox，只触发html页面中的数据属性。我也有同样的问题，但当时我想在Slick Carousel中留下一个无限循环，所以我从克隆图像的页面加载中删除了

数据fancybox

：

$（'.Slick cloned'）。removeAttr（'data-fancybox'）@kwiat1990这不就是完全摆脱了链接吗？我假设你仍然想推出Fancy Box，即使是在复制幻灯片上。一种选择是以克隆的元素为目标，并将data fancybox属性更改为其他属性，即“data fancybox=”duplicate“。这可能会搞乱fancybox中的分页/编号，因为克隆元素出现在当前项之前和之后，但我认为这是一个比没有更好的选择。@Carter，不幸的是，现在我记不太清楚该代码了，所以我无法详细说明。然而，我对当时的工作方式很满意，所以我认为这是一个很好的解决方案。在我的具体案例中，克隆元素出现在屏幕外，因此kwiat1990的解决方案就足够了。但是，无论何时，只要您想在克隆上启动fancybox，就给它们一个
数据fancybox触发器
属性。它是专为复制图像而设计的<代码>$（'.slick克隆a'）.removeAttr（'data-fancybox'）$（'.slick cloned a'）.attr（'data-fancybox-trigger'，'gallery'）还有，请看。我只是做了一些比较简单的事情：
$（'.slick slide:not（.slick cloned）[data fancybox=“gallery”]'）.fancybox（{..}）
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;
}