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>

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

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

jquery

fancybox-3