Magnific popup，选择最后显示的图像

Question

I have a list of thumbnails, when clicking on one of the thumbnails it shows the image in a popup with the Magnific script popup.

When clicking on a thumbnail I also show a border around the thumbnail that was just clicked on. This is simply done with:

function SelectPicture(picture_id) {
$("li").removeClass('add_border_image');
$("li#picture_"+picture_id).addClass('add_border_image');}

However when looking at and navigating through the larger images, I need to select each thumbnail by showing a border around it. So that when the popup is closed, the user can see which image was the last one that he looked at.

I know that I can override the close button like this:

  callbacks: {
    open: function() {
      $.magnificPopup.instance.close = function() {
        $("li").removeClass('add_border_image');
        $("li#picture_156259").addClass('add_border_image');    
        $.magnificPopup.proto.close.call(this);
      };
    }
  },

But how to pass the id of the current showing image to the right thumbnail, so that it shows the border? In above callback everything works like expected, but here the id of the thumbnail is hardcoded for testing.

Answer 1

Got it working by using the index of the larger image and with that index adding the class to the corresponding thumbnail with the same index.