jQueryライトボックスの画像の位置

Question

私はカスタムモーダルウィンドウの画像ギャラリー/ライトボックスを作成しましたが、画像の配置に問題があります。画像を選択して順次クリックすると、基本的には問題ありませんが、画像を終了してから同じ画像を再度開くと、その位置は右にずれます。私は何が問題になるか分かりません。私は< img>を絶対とコンテナの相対位置に配置しました。画像のCSSを左に設定しました：50％;トップ：50％ JSを使用して左と上のマージンを計算します。画像を再度開いたときに位置が変わる理由は誰でも知っていますか？ Jsfiddleは以下にリンクしています。前もって感謝します！！

CSS：余白のため

#photoViewer { 
    display: inline-block; 
    position: relative; 
    margin: 0 auto; 
} 
#photoViewer img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    max-height: 70vh; 
} 

JS：

$img.css({ 
    marginLeft: -$img.width()/2, 
    marginTop: -$img.height()/2 
}) 

とコンテナのdivのサイズ：

function adjustSize() { 
var $width = $current.width(); 
var $height = $current.height(); 
$frame.css({ 
    width: $width, 
    height: $height 
}); 

}

（私はたくさんのですこのコードはJon Duckettの "Javascript & jQuery "の本ですが、それを微調整し、いくつかの要素/アイデアを組み合わせています）。 jsFiddleへ

リンク：あなたはあなたの以下の機能に問題が持ってhttps://jsfiddle.net/jessereitz1/6nxg21a3/1/

Answer 1

- 関数の戻りwidth:0と上記第二のクリックで関数の戻りwidth:200とheight:133

上記の最初のクリックで

function adjustSize() { 
    var $width = $current.width(); 
    var $height = $current.height(); 
    console.log($width,$height); /*Debug in console*/ 
    $frame.css({ 
    width: $width, 
    height: $height 
    }); 
} 

をheight:0

これがこの種の問題の理由です。

$cache = {}のもう一つの問題は、それはwidthとキャッシュ画像のheightプロパティを取得していないcache[src].$imgオブジェクトです。

function changeImg(index) { 
    var $img; 
    var src = $thumbnails[activeIndex].href; 
    request = src; 

    /*if(cache.hasOwnProperty(src)){ 
    if(cache[src].isLoading === false) { 
     $frame.append(cache[src].$img); 
     crossfade(cache[src].$img); 
    } 
    }else*/{ 
    $img = $('<img/>'); 
    cache[src] = { 
     $img: $img, 
     isLoading: true 
    }; 

    $img.on('load', function() { 
     $img.hide(); 
     $frame.removeClass('isLoading').append($img); 
     cache[src].isLoading = false; 
     if (request === src) { 
      crossfade($img); 
     } 
    }); 

    $frame.addClass('isLoading'); 

    $img.attr({ 
     'src': src, 
     'alt': $thumbnails[activeIndex].title || '' 
    }); 
    } 
} 

キャッシュをチェックせずに、適切な結果が得られます。