弹出窗口打开时图像翻转

Question

我使用Magnific Popup脚本。我正在为弹出的图像添加一个效果，使其在输入时翻转。我通过在Magnific Popup的beforeOpen事件中添加一个jquery类来添加它。问题是，如果我先点击图像，翻转就不会发生。图像将弹出。但在收盘时，图像会翻转。如果我第二次打开相同的图像，则会发生翻转。

这是我使用的代码：

$(function() {
    $('#gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      removalDelay: 500, //delay removal by X to allow out-animation
      titleSrc: 'title',
      callbacks: {
        beforeOpen: function() {
        // just a hack that adds mfp-anim class to markup
        this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
        this.st.mainClass = this.st.el.attr('data-effect');
        },
      },
     closeOnContentClick: true,
     midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
   });
  })

看起来要应用效果，必须加载图像。图像仅在第一次加载后加载。我该如何解决这个问题？