CODEWITHSUNDEEP
jqueryfancyboxfancybox-3
Caio Kawasaki
Caio Kawasaki

Reputation: 2950

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

I am trying to load a fancybox through an array, however I am having problems, I get the following error message: 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>

Any idea why this is happening?

Upvotes: 0

Views: 831

Answers (1)

Chaska
Chaska

Reputation: 3205

Would you try changing 'href': $(e).attr('href') to '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>

Upvotes: 1

Related Questions