Why doesn't the gallery work correctly in the Magnific Popup?

Question

JavaScript

There is a one-page site proteks.h1n.ru , in the "Completed Works" block there are several works. When you click on each of them, 3 pictures of the object open and a description for it on the right. It is necessary to make it so that when you click on any of the three pictures, you can view them in a new popup window and, upon closing, return to the description of the object with three pictures.

In general, what problems arise:

1) An attempt to implement this was made on the first object when you click on a larger picture, but only the picture itself appears with the close button, when you click on the close button or on any area, the site itself opens, but you need to open the description and 3 pictures to it, i.e. the previous window.

2) The whole thing works only with the following call:

$('#test-popup').magnificPopup({
  items: 
      {
        src: 'img/portfolio/Altai-main.jpg',
        type: 'image',
      }
   
})

Moreover, no other options, including other items in the form of a photo, can be inserted in this way, all other options are ignored. Even if type: 'image' is moved outside of the items option, it won't work and only the dark overlay will be shown.

3) With the help of links, this cannot be done, since the links are already taken by the portfolio itself.

//For Mixitup

  $("#portfolio_grid").mixItUp();
  $(".objects li").click(function() {
    $(".objects li").removeClass('active');
    $(this).addClass('active');
  });	

  $(".popup").magnificPopup({type:"image"});
  $(".popup_content").magnificPopup(
    {type: 'inline', midClick: true}

    );

  // Добавляем Id для ссылок и для каждого скрытого блока .port_descr
  $(".portfolio_item").each(function(i) {
    $(this).find("a").attr("href", "#work_" + i);
    $(this).find(".port_descr").attr("id", "work_" + i);
  });

Please help me to solve this problem.

Answer 1

Cheers https://embed.plnkr.co/a8JnwbbFrkn6sF10shl1/