Magnific Popup - loading content from external page via ajax into a slideshow

JavaScript
1

I’m struggling with this little bit…I made a page that has a div with some images inside of it. Similar to this:

<div id="gallery">
<img src="/photo1.jpg" title="photo 1">
<img src="/photo2.jpg" title="photo 2">
<img src="/photo3.jpg" title="photo 3">
</div>

I have another page that has a button that would load this page and then i want to load the above list of photos into the Magnific Popup slideshow to show them one by one.

The javascript i have looks like this, but it doesnt separate the photo into slides, it just shows them all stacked one on top of the other inside the lightbox. So its like they arent getting added into the slideshow format.


jQuery('.external-media').magnificPopup({
    type: 'ajax',
    modal: true,
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
            image: {
        tError: '<a href="%url%">The image #%curr%</a> 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 div').magnificPopup({
                        type: 'image',
                        delegate: 'a',
                        gallery: {
                        enabled: true
                        }
                });


            console.log(this.content);
        }
    }
});

What i want is to click the button with class “external-media” and it look for a div with the ID of “#gallery” on the page and display only those images inside of the lightbox the same as it would if those items were inline. The idea is that then we would be able to make our galleries portable throughout our website.

Is this possible? I’m not sure of the syntax to use here.

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.