windows8でmediaboxウィンドウが右下に来る対策案

2014年11月29日土曜日

Windows7でmediaboxを使っていた時は問題なかったが、Windows8.1パソコンで自分のページを見て初めて気がついた。
つまりmediaboxが埋め込まれた画像をクリックすると、大きな画像が画面中央ではなく、画面右下にずれて表示されたのである。
同じページをChromeで見たが、問題ない。これはどうもie11に起きた症状のようである。
これでは気分が悪いので、対策がないかどうか調べてみた。Javascript供給元であるmediaboxadvancedのサンプル画像は問題なく中央に来ている。そのページのソースを見ると、未だ開発途上のmediaboxAdvanced 1.5であることが分かった。私が使っているのはmediaboxAdvanced 1.3.4である。このバージョンで、スクリプトを一部変更することで、対応できないか、更に調べていくと、こんな文章に出合った。
I have managed a kludge to work around this issue (for v1.3.4b of the code).
In version 1.3.4b I have commented out line # 142:
//margin = center.getStyle('padding-left').toInt()+image.getStyle('margin-left').toInt()+image.getStyle('padding-left').toInt();
and then added the following two lines:
var srs_imgMarginLeft = ( isNaN(image.getStyle('margin-left').toInt()) ) ? 0 : image.getStyle('margin-left').toInt();
margin = center.getStyle('padding-left').toInt()+srs_imgMarginLeft+image.getStyle('padding-left').toInt();
これを読むと、142行のmargin=center.getStyle以下のコード1行を
var srs_imgMarginLeft = ( isNaN(image.getStyle('margin-left').toInt()) ) ? 0 : image.getStyle('margin-left').toInt();
margin = center.getStyle('padding-left').toInt()+srs_imgMarginLeft+image.getStyle('padding-left').toInt();
の2行に置き換えればいいと言う事だ。 クリックで拡大画像。
image
早速、コードを変更してアップロードし、該当ページで確認したらきちんと画面中央に表示された。
これで、これまで未解決だったのがクリアされてスッキリとした気分になった。
●確認ページ:石狩観光(テキスト・地図・動画の部分、画像はlightbox-plus使用)

0 コメント: