1

I use Magnific Popup and Shuffle plugins on my page. I load new items as soon as the user reach the bottom of the page. What I want to do is to bind my new items to Magnific Popup after loading them. I tried to follow this answer Dynamically add items to Magnific Popup gallery but it is not working for me.

Below the js code I use to do so. First, once the page is loaded I use this code to setup MP

// gallery mode
$('.gallery-item').magnificPopup({
    gallery: {
        enabled: true
    },
    mainClass: 'mfp-fade',
    fixedContentPos: false,
    type: 'image'
}); 

Then, as soon as the user reach the bottom of the page if request the JSON file

$.getJSON( "list-dir.php")
          .done(function( data ) {

            var diff = Object.keys(data).length - $(".item").length;
            var NUM_TO_LOAD = diff > 10 ? 10 : diff;
            if(Object.keys(data).length > $(".item").length){
                for(var i = 0 ; i<= 10; i++) {
                    var el = data[$(".item").length];
                    if (el === undefined) { break; }
                    var name = el.substring(0,el.indexOf("_") );
                    var $item = $('<div class="item shuffle-item filtered" data-groups="photo" data-groups="photo"><a href="img/dresses/'+ el + '" class="gallery-item item-link" style="margin: 10px;"><div class="item-img" style="background-image: url(\'img\/dresses\/' + el + '\' )"></div><div class="item-overlay"><h5>'+ name +'</h5></div></a></div>');

                    //Shuffle update
                    $('.portfolio').append($item);
                    $('.portfolio').shuffle('appended', $item);

                    // get instance (after popup was opened)
                    var mfp = $.magnificPopup.instance;
                    // modify the items array (push/remove/edit)
                    mfp.gallery.push({
                        src: $item
                    });
                    mfp.updateItemHTML();
                }
            }
        });
Community
  • 1
  • 1
Skunkies
  • 151
  • 1
  • 1
  • 10
  • You should init magnificPopup for each time that you get new content. This is the same problem that happens on http://stackoverflow.com/questions/32933397/binding-dynamic-dom-elements-to-content-js-plugin/32933606#32933606 – Héctor Oct 04 '15 at 12:49
  • hum, not sure that is the same issue. My problem is to init MP and do not succeed to do that. – Skunkies Oct 04 '15 at 12:53
  • i have similar issue, did you solve it? – Learner Jul 02 '17 at 19:38

0 Answers0