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

Question

我正在尝试通过数组加载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>

知道为什么会这样吗？

Answer 1

您会尝试将'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>