Изображения не загружаются с помощью Magnific Popup

Question

Поэтому в основном я создаю своего рода галерею и я получаю сообщение об ошибке, когда он всплывает говоря:

Изображение не может быть загружен

Я не знаю, что я делаю неправильно, поскольку я включил все необходимые файлы css и javascript. Вот мой HTML:

<div class="gallery-item"> 
     <img class="popup" src="http://placehold.it/200x200" alt=""> 
     <a class="popup" href="http://placehold.it/200x200"><div class="item-overlay"> 
      <span><i class="fa fa-plus"></i></span> 
     </div></a> 
</div> 

Вот мой JavaScript:

$(document).ready(function() { 
    $('.popup').each(function() { 
     $(this).magnificPopup({ 
      type: 'image', 
      delegate: 'div', 
      closeOnContentClick: false, 
      closeBtnInside: false, 
      mainClass: 'mfp-with-zoom mfp-img-mobile', 
      image: { 
       verticalFit: true, 
       titleSrc: function(item) { 
        return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>'; 
       } 
      }, 
      gallery: { 
       enabled: true 
      }, 
      zoom: { 
       enabled: true, 
       duration: 300, // don't foget to change the duration also in CSS 
       opener: function(element) { 
        return element.find('img'); 
       } 
      } 
      }); 
    }); 
}); 

JSFiddle: http://jsfiddle.net/roa59n2t/1/

Answer 1

Таким образом, один из способов является обернуть шаблон изображения в целевой связи, как показано ниже ,

/** MY CODE **/ 
 
$('a.popup').magnificPopup({type: 'image' });

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script> 
 
<div> 
 
    <div class="gallery-item"> 
 
     <a class="popup" style="display: block" href="http://placehold.it/150x150"><img class="popup" src="http://placehold.it/150x150" alt="" /></a> 
 
     <div class="item-overlay"> 
 
      <span><i class="fa fa-plus"></i></span> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="gallery-item"> 
 
     <a class="popup" style="display: block" href="http://placehold.it/200x200"><img class="popup" src="http://placehold.it/200x200" alt="" /></a> 
 
     <div class="item-overlay"> 
 
      <span><i class="fa fa-plus"></i></span> 
 
     </div> 
 
    </div> 
 
</div>