0

ライトボックスの画像ギャラリーを書いていて、正しい画像の配置に苦労しています。

画像をクリックすると、ライトボックスが表示されます。JSで生成された全く新しいオブジェクトです。マージンを設定することで、画面中央に移動します（z-index付き）。

ただし、これらのアクションは、イメージがロードされる前に実行されます。そのため、JS には必要な情報がなくclientWidth、代わりにclientHeight使用さ0れます。これにより、画像の左上隅 (他の隅と同じようにロードする前) が画面の中央に表示されます。画像の読み込みが開始されると、右下に拡張されます。

画面上で画像を正しく配置するにはどうすればよいですか?

PS: lightbox/lightbox2 ライブラリへの接続はありません。

PPS: 関連コード:

JS:

function lightbox(res, dsc) {
    // lbimg: Lightbox-Image
    var lbimg = document.createElement("img");
    lbimg.src = res;
    lbimg.id = "lbimg";
    document.body.insertBefore(lbimg, document.body.firstChild);
    lbimg.style.marginTop = "-" + Math.floor(lbimg.clientHeight/2.) + "px";
    lbimg.style.marginLeft = "-" + Math.floor(lbimg.clientWidth/2.) + "px";
}

CSS:

#lbimg {
    max-width: 70%;
    max-height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 10px solid #fff;
    z-index : 10;
}

HTML (縮小画像のみ表示):

<div class="list">
    <div><a onclick="lightbox('image.JPG', ''); "><img class="mini" src="image.JPG_MINI.jpg" /></a></div>
    <!--other images are defined analogous-->
</div>
4

2 に答える 2

0

onload 呼び出し内にマージン計算をラップしてみてください。

lbimg.onload = function () {
    lbimg.style.marginTop = "-" + Math.floor(lbimg.clientHeight/2.) + "px";
    lbimg.style.marginLeft = "-" + Math.floor(lbimg.clientWidth/2.) + "px";
};

これにより、マージンを正しく計算できるように、JS が高さと幅を使用できるようになります。

于 2013-08-03T13:45:43.000 に答える