When you call

$('.image-popup')

(with anything after the .) it will only apply to the elements that exist at that time. eg $('.image-popup').click(function() { alert("click"); }); will only put an event handler for those that exist so appending any new elements will not have that click handler (which is why we need to use event delegation for dynamically added elements).

The same applies here.

$('.image-popup').magnificPopup({

will tell magnificPopup only about the image-popups that exist at that time. When you add new ones later, it doesn't know about them.

So you need to recall your magnificPopup initialisation after you add the new elements.

You could just display some dummy empty element (it could contain a loading icon) and load/reload content inside that element using ajax by yourself.

First, make sure you've included the jQuery library properly:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Secondly, maybe there is a conflict between jQuery with other libraries, you can try to use:

jQuery(document).ready(function ($) {
     $('.image-viewer').magnificPopup({
          type: 'ajax'
     });
});

Yes, you're correct. You will need to re-execute that code every time new items are added to the DOM. I don't know which jQuery pagination plugin you're using, but here's a quick demo using "Infinite Ajax Scroll". You should be able to adapt this to whatever plugin you're using. The key is to call activatePopup(); inside the callback function that gets executed after new items have been added to the DOM:

jQuery(window).load(function(){
  activatePopup();

  // Initialize the pagination plugin
  var ias = jQuery.ias({
    container:  '#posts',
    item:       '.post',
    pagination: '#pagination',
    next:       '.next'
  });

  // Pagination plugin callback function
  ias.on('rendered', function(items) {
    activatePopup();
  });

  function activatePopup() {
    jQuery('.open-popup-link').magnificPopup({
      type:'iframe',
      alignTop: true,
      overflowY: 'scroll',
      midClick: true 
    });
  }
});

UPDATE

Now that I know which plugin you're using, here's some updated code:

jQuery(window).load(function(){
  activatePopup();

  // Plugin callback function
  jQuery(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    activatePopup();
  });

  function activatePopup() {
    jQuery('.open-popup-link').magnificPopup({
      type:'iframe',
      alignTop: true,
      overflowY: 'scroll',
      midClick: true 
    });
  }
});

You need to call your $("#sleva").validate({... after you call your $(".sleva-popup").magnificPopup({....

When your form is already loaded, you document.ready function validates it at the beginning. Otherwise, you have to do it manually after you insert the form in your page.

I found a solution. Actually pretty easy...

request.done(function(response){
    element.href = "data:image/png;base64,"+response.documentElement.textContent;
    $.magnificPopup.open({
        items: {
            src: element.href,
        }
    });
});

I had to add the .href to the element. Now it works like a charm.

I could also add the data string directly to the src, but i want to keep the data string in the element. This way magnific can open the image once the user clicks the link and there is no need to execute the ajax request again.

The Solution to your problem is, you didn't download the correct file for your Magnific-popup script.

You just downloaded the complete gitHub Page, not the needed css/jquery file.

You need to download this file jQuery and this CSS.

On gitHub pages you have to click the "raw" tab, to get the clean code you need for your projects.