javascript - 画像の入れ替え後にサイズの異なる画像に垂直方向のセンタリングを適用する

Question

現在、このスクリプトを使用して、単一のフォルダー内の画像を循環しています。

$(function(){
  $(".img-swap").on('click', function() {
    var self = this,
        file = this.src,
        common = file.substring(0, file.length-6)
        currentId =  +file.substr(-6,2),
        id = ('0' + (currentId+1)).substr(-2),
        nextimage = new Image();

    nextimage.onload = function(){
      // image was preloaded so it exists
      var img = this;
      $(self).fadeOut('slow', function(){self.src = img.src; $(self).fadeIn(300)});
    };
    nextimage.onerror = function(){
      // error occured while preloading. we assume image does not exist
      $(self).fadeOut('slow', function(){self.src = common+ '01.jpg'; $(self).fadeIn(300)});
    };
    nextimage.src = common + id + '.jpg';
  });
});

問題は次のとおりです。画像はすべて % ベースのサイズで、次のスクリプトを使用してコンテナー内で垂直方向に配置されています。

 $(window).resize(function(){
  $( ".vertical").each(function() {
    $(this).css({
      position:'relative',
      marginTop: ($(this).parent().outerHeight() 
                  - ($(this).outerHeight()+15))/2
    });
  });
});

$(window).load(function() {
  $( ".vertical").each(function() {
    $(this).css({
      position:'relative',
      marginTop: ($(this).parent().outerHeight() 
                  - ($(this).outerHeight()+15))/2
    });
  });
});

現在: 新しく読み込まれた画像の高さが初期画像と異なる場合、ウィンドウのサイズを変更するまで初期画像の高さが使用されるため、垂直マージンは画像を中央に配置しません。

ウィンドウのサイズを変更せずに、新しく読み込まれた各画像にマージントップを適用する可能性はありますか?

ベータ版サイトはこちら: http://www.zeiteffekt.de/relaunch

すべてのヘルプは非常に高く評価されています。