CODEWITHSUNDEEP
javascriptmagnific-popup
mychalvlcek
mychalvlcek

Reputation: 4046

magnific popup on JS generated link

I want to use magnific popup on dynamically generated content. I have link generated via javascript and a want to use "iframe" magnific popup with this link.

HTML:

<div id="content">
  <a href="https://www.google.com/" class="mp">link</a>
</div>

JS:

$(function(){
    $('.mp').magnificPopup({
          type: 'iframe',
          closeOnContentClick: false,
          closeBtnInside: true,
          removalDelay: 300,
          mainClass: 'mfp-with-zoom mfp-img-mobile my-mfp-slide-bottom'
    });

    var a = $("a").clone();
    a.text('generated');
    a.appendTo('#content');

});

live example : jsfiddle

With classic static link everything works well but on generated link it doesn't work. Is there some "refresh" function which will register generated link to magnific popup scope?

I tried to construct new magnific instance after generating the link and it works, but is there some cleaner solution?

Thanks for any response.

Upvotes: 3

Views: 2191

Answers (1)

mychalvlcek
mychalvlcek

Reputation: 4046

Thanks to @MVCDS i figured it out, theres option for this.

$('body').magnificPopup({
      delegate: 'a.mp',
      type: 'iframe',
      closeOnContentClick: false,
      closeBtnInside: true,
      removalDelay: 300,
      mainClass: 'mfp-with-zoom mfp-img-mobile my-mfp-slide-bottom'
});

Upvotes: 6

Related Questions