Ajax loading and fancybox?

Question

JavaScript

Good afternoon. There are two sites on which you need to load an image gallery via ajax. At the moment, everything is done in such a way that when I click on the button, ajax image loading starts for me and, accordingly, fancybox, which is executed first, which, accordingly, cannot find the image of the same group:

/* FancyBox */
    $(document).ready(function() {
      $("a.fancyimage").fancybox();
    });
    // Gallery Photo
    $('.gallery-photo').on('click', function(event){
      event.preventDefault();
      var $self = $(this);

      $.ajax({
        url: "/wp-admin/admin-ajax.php",
        type: "GET",
        data: "action=get_images&id=" + $self.data('id'),
        success: function(data){
          var $gallery = $self.parent().parent().parent().find('.gallery-loop');
          $gallery.html(data);
        }
      });
    });

Well, the html itself:

<div class="item">
      <div class="img">
        <img src="<?php echo get_post_meta( get_the_ID(), 'post_poster', false )[0]['guid'] ?>" alt="">
      </div>
      <div class="buttons">
        <div class="bt">
          <a class="fancyimage gallery-photo" data-id=<?php echo get_the_ID(); ?> data-fancybox-group=<?php echo get_the_ID(); ?> href="<?php echo get_post_meta( get_the_ID(), 'post_poster', false )[0]['guid']; ?>"><span><i class="fa fa-plus" aria-hidden="true"></i></span></a>
          <a href="<?php the_permalink(); ?>"><span><i class="fa fa-chevron-right" aria-hidden="true"></i></span></a>
        </div>
      </div>
      <div class="info">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </div>
      <div class="gallery-loop"></div>
    </div>

Can this problem be solved?
Or are there alternatives?

Answer 1

Try calling $("a.fancyimage").fancybox();
Btw again after inserting images on the page, instead parent().parent()....parent().parent()look at.closest()