title: Magnific Popup - Loading content from external page and put it in the slideshow
body: <p>Here is what i want to do. I'm attempting to make the galleries I have on my site more portable so i can generate a link to my projects page and then have Magnific Popup display the contents from that page into the slider.</p>
  
  <p>I'd like to work like it would if all of the elements were on this page maybe hidden inline, but i can't load these items inline, i have to fetch them from the external page.</p>
  
  <p>Let's look at some code, first off, I have a text link that links to the projects page:</p>
  
  <pre><code>&lt;a href="http://domain.com/projects/my-project-template/" class="external-media"&gt;View Project&lt;/a&gt;
  </code></pre>
  
  <p>If you visit the project template, you'll see the carousel of work samples.  But if a link with class .external-media is clicked, jquery should take over and load items from this page into the magnific popup.</p>
  
  <p>I have the data outputting in html format and I also tried json too.  The html structure is something like the following:</p>
  
  <pre><code>&lt;div id="gallery"&gt;
  &lt;a href="photo1.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"&gt;&lt;img src="/thumbnail1.jpg" alt="" class="standard-image"&gt;&lt;/a&gt;
  &lt;a href="photo2.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"&gt;&lt;img src="/thumbnail2.jpg" alt="" class="standard-image"&gt;&lt;/a&gt;
  &lt;a href="photo3.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"&gt;&lt;img src="/thumbnail3.jpg" alt="" class="standard-image"&gt;&lt;/a&gt;
  &lt;a href="photo4.jpg" title="" class="gallery-item" data-effect="mfp-move-horizontal"&gt;&lt;img src="/thumbnail4.jpg" alt="" class="standard-image"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then my javascript looks like this, i was trying to use the ajax type.</p>
  
  <pre><code>jQuery('.external-media').magnificPopup({
    type: 'ajax',
    modal: false,
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1]
    },
    image: {
      tError: '&lt;a href="%url%"&gt;The image #%curr%&lt;/a&gt; could not be loaded.',
      titleSrc: function(item) {
      return item.el.attr('title');
      }
    },
    callbacks: {
      parseAjax: function(mfpResponse) {
      mfpResponse.data = jQuery(mfpResponse.data).find('#gallery');
      console.log('Ajax content loaded:', mfpResponse);
    },
    ajaxContentAdded: function() {                            
      $('#gallery').magnificPopup({
        type: 'image',
        delegate: 'a',
        gallery: {
                  enabled: true,
                  tPrev: 'previous',
                  tNext: 'next',
                  tCounter: '%curr% of %total%'
        },
        image: {
         verticalFit: true,
         titleSrc: function (item) {
         return item.el.attr('title') + ' &amp;middot; &lt;a class="image-source-link" href="' + item.src + '" target="_blank"&gt;&lt;i class="fa fa-file-image-o"&gt;&lt;/i&gt; open original&lt;/a&gt;';
            }
          },
      });
      console.log(this.content);
      }
    }
  });
  </code></pre>
  
  <p>Right now what happens when i click the text link, it displays all 4 images stacked on top of each in the lightbox.  I want to display one at a time in the slideshow with the left, right arrows.  </p>
  
  <p>Basically, have it look exactly like how it does if all of the elements are on  the same page.  </p>
  
  <p>Anyone got any tips how i can load images from an external source and populate the lightbox in a slideshow?</p>
  
  <p>===</p>
  
  <p>I'm exploring some other options now since some of you offered some ideas.  Here is what I got, but it doesnt seem to work.  I think it is a half solution right now.  I have a click function that grabs the contents from the permalink page and loads it into a div on the current page template.  I can see the items in the content div after i click the link but i can't get the lightbox to open.  Clearly i am doing something wrong here.</p>
  
  <pre><code>$('.external-media').click(function( event ) {
  
      event.preventDefault();
  
      var href = jQuery(this).attr('href') + ' #gallery';
      var items = [];
  
      $.ajax({
              url: href,
              type:'GET',
              success: function(data){
                           $('#content').html(
                              $(data).find('.slide').each(function() {
                               items.push({
                                   src: $(this)
                                  });
                           })
                      );
              }
      });
  
      $.magnificPopup.open({
          type: 'inline',
          gallery: {
                  enabled: true,
                  tPrev: 'previous',
                  tNext: 'next',
                  tCounter: '%curr% of %total%'
          }
      }); // close mpopup
  
  }); // close click
  </code></pre>
  
  <p>Two things i am seeing when i click this function.  I see the items appear in the div, they do not load in the lightbox.  However, clicking one of the items does load that item into the lightbox.  So that is a problem because i want the lightbox to open right when the user clicks the link.</p>
  
  <p>The other issue i see when i click the link i am getting a javascript error.</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'parsed' of undefined
  </code></pre>
  
  <p>I'm going to experiment some more, but if you guys have some other thought i am open to hear any and all options, suggestions.</p>