title: Magnific popup: getting “The image could not be loaded”
body: <p>I can't make a gallery work with magnific popup. When I click on a picture I receive “The image could not be loaded”.</p>
  
  <p>Here is the html file listing images:</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='picture'&gt;&lt;img src='images/gallery/a.jpg'/&gt;&lt;/div&gt;
      &lt;div class='picture'&gt;&lt;img src='images/gallery/b.jpg'/&gt;&lt;/div&gt;
      &lt;div class='picture'&gt;&lt;img src='images/gallery/c.jpg'/&gt;&lt;/div&gt;
      &lt;div class='picture'&gt;&lt;img src='images/gallery/d.jpg'/&gt;&lt;/div&gt;
      &lt;div class='picture'&gt;&lt;img src='images/gallery/e.jpg'/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here the jquery code:</p>
  
  <pre><code>$.get( 'html/gallery.html', function( data ) {
          $('#page_content').append(data);
  
          $('.container').magnificPopup({
          type: 'image',
          delegate: 'div',
          gallery:{
              enabled: true,
              navigateByImgClick: true,
              arrowMarkup: '&lt;button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"&gt;&lt;/button&gt;',
              tPrev: 'Previous (Left arrow key)',
              tNext: 'Next (Right arrow key)',
              tCounter: '&lt;span class="mfp-counter"&gt;%curr% of %total%&lt;/span&gt;'
          }
      });
  </code></pre>
  
  <p>I tried to change the "delegate" value to 'div' or 'img' but no result. (I followed this <a href="https://stackoverflow.com/questions/18412335/magnific-popup-getting-the-image-could-not-be-loaded-and-image-url-is-undefin">Magnific popup: getting &quot;The image could not be loaded&quot; and image url is undefined</a>)</p>
  
  <p>Thanks for help :)</p>