Fancybox - 无法加载请求的内容 - 从数组中加载 fancybox

Fancybox - The requested content cannot be loaded - load fancybox from array

我正在尝试通过数组加载 fancybox,但是我遇到了问题,我收到以下错误消息:The requested content cannot be loaded.

$(document).ready(function(){
    $('.project-trigger').on('click', function(e){
        e.preventDefault();

        var el = $(this),
            images = el.siblings('.project-images').find('a'),
            formated = [];

        $.each(images, function(i, e){
            formated.push({
                'href': $(e).attr('href')
            });
        });

        $.fancybox.open(formated);
    });
});
.project-images{
  display: none;
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet"/>

<a href="#" class="project-trigger">Click me</a>
<ul class="project-images">
  <li>
    <a href="http://via.placeholder.com/800x600">
      <img src="http://via.placeholder.com/800x600">
    </a>
  </li>
  <li>
    <a href="http://via.placeholder.com/800x600">
      <img src="http://via.placeholder.com/800x600">
    </a>
  </li>
  <li>
    <a href="http://via.placeholder.com/800x600">
      <img src="http://via.placeholder.com/800x600">
    </a>
  </li>
  <li>
    <a href="http://via.placeholder.com/800x600">
      <img src="http://via.placeholder.com/800x600">
    </a>
  </li>
</ul>

知道为什么会这样吗?

你会尝试将 'href': $(e).attr('href') 更改为 'src': $(e).attr('href') 吗?

$(document).ready(function(){
    $('.project-trigger').on('click', function(e){
        e.preventDefault();

        var el = $(this),
            images = el.siblings('.project-images').find('a'),
            formated = [];

        $.each(images, function(i, e){
            formated.push({
                'src': $(e).attr('href')
            });
        });

        $.fancybox.open(formated);
    });
});
.project-images{
  display: none;
}
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet"/>

<a href="#" class="project-trigger">Click me</a>
<ul class="project-images">
  <li>
    <a href="http://via.placeholder.com/800x600">
      <img src="http://via.placeholder.com/800x600">
    </a>
  </li>
  <li>
    <a href="http://via.placeholder.com/800x600">
      <img src="http://via.placeholder.com/800x600">
    </a>
  </li>
  <li>
    <a href="http://via.placeholder.com/800x600">
      <img src="http://via.placeholder.com/800x600">
    </a>
  </li>
  <li>
    <a href="http://via.placeholder.com/800x600">
      <img src="http://via.placeholder.com/800x600">
    </a>
  </li>
</ul>