How to re-initiate Fotoram after loading ajax content?

Question

AJAX

Hello, photo frame is not working after ajax load. As I understand it, you need to re-initiate the photo frame. Tell me how

I call the photo frame like this ^

(function () {
  $('.fotorama').fotorama();
 })

ajax content like this

$('.popup-with-form').magnificPopup({
 	type: 'ajax'
  
 });

Answer 1

Try like this:

$('.popup-with-form').magnificPopup({
    type: 'ajax',
    callbacks: {
        ajaxContentAdded: function() {
            $('.fotorama').fotorama().destroy();
            $('.fotorama').fotorama();
        }
    }
});

Answer 2

Try to simply call the code in the forehead every second:

$(function() {
    setInterval(function() {
        $('.fotorama').fotorama();
    }, 1000);
})

If your photo frame is written correctly, it will skip the already initiated elements during repeated launches, which means that the method above is acceptable, although not ideal. Ideally, here you should use MutationObserver to track the fact of loading content, but I'm too lazy to write code with it)