jQueryのカラーボックスの位置決め画像の間違った（中心ではありません）

Question

私が使用しているjQueryのプラグインカラーボックスのこのページます。

あなたはそれがいくつかの小さなポラロイド-探してサムネイルがあり、右下の、中央にメインの商品画像を見れば。あなたがいずれかをクリックした場合、それはColorboxを使用して画像をポップアップ

あなたが広い800ピクセル（ページコンテンツの幅）については、ブラウザのウィンドウを作成する場合は、

はポップアップが中央に表示されます。しかし、あなたがブラウザウィンドウを広げるとポップアップが（センターに滞在していない）より多くの右にドリフトします。

私はこの問題を解決することができますどのように誰もが知っていますか？

Answer 1

さて、私はこの行を変更して、それを修正することができました。

posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

と

posLeft = Math.max(800 - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

でjquery.colorbox.js

envolveプラグインのソースを変更して製造しないが、溶液それ以下動的が理想的である。

Answer 2

bodyタグは、「位置：相対」に設定されている場合。カラーボックスは正確にページの中央を計算しません。

Answer 3

colorbox.css

#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}

タグに置き換え

#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat center center;}

Answer 4

私はそれが縦方向に正しく揃えるないとの問題を持っていた、と私は解決策ではなくdocument.documentElement.clientHeightと.clientWidthのjQueryの.height（）と.width（）関数を使用することを考え出しました。

：posTopとposLeft変数は次のように設定する必要がありますので、

posTop = Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2 + $window.scrollTop(),

posLeft = Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2 + $window.scrollLeft();

Answer 5

私は同じ問題を抱えていたし、私の体は、「位置：相対」に設定されていませんでした。

これは最善の解決策ではないかもしれないが、あなただけのonCompleteのイベントを使用することにより、プラグインのコードを変更せずにそれを修正することができます：

$('img.colorbox').colorbox({onComplete: function() {
     $('#colorbox').css('left', ((window.innerWidth - $('#colorbox').width()) / 2) + 'px');
} });

カラーボックスがロードされ、中央にない表示され、その後、すぐにrepositionnedします。ユーザは、遷移が表示されますが、ボックスは中央に配置されます。

これはまだ理想的ではありませんが、プラグイン

の変化を伴いません