jqueryで最初に2つの画像が正しく読み込まれない理由

Question

私の質問は非常に複雑で、誰かが私を助けてくれることを願っています。私は画像ギャラリーqih jqueryとPHPを作成しました。まず、MySqlデータベースからすべてのイメージ名を取得し、それをサーバーフォルダから取り出し、PHPでサイズを変更します。それはサムネイルを作成し、大きな画像を表示するjqueryのポップアップウィンドウを作成しました。その後、私は前と次のボタンを配置し、PHPからのイメージ結果の配列を取得し、それらをjsonを使用してjqueryにエコーするようjqueryに指示しました。次に、配列を通過して、次のおよび前のエフェクトを作成します。次に、次のボタンと前のボタンがクリックされたときに、私は個々の画像を中心にしていました。 1枚目と2枚目の画像をロードすると、中央に表示されず、右に移動します。私はなぜこれが起こっているのか理解できません。私は本当にここでいくつかの助けが必要です。ここに投稿するにはあまりにも多くのコードがありますので、私はあなたにウェブサイトを提供しており、ソースコード内のすべてを見ることができます。私がPHPを使用していることを覚えておいてください。なぜそれがどうしてその絵を反復しているのだろうと思っているのです。誰でも私を助けてくれてありがとう。

http://www.oceanphotostudio.com/test/collection/before-and-after.php

Answer 1

あなたの説明は全く問題がovercomplicates。ブラウザはサーバー上で配列やhtmlをどのように生成するか、どのような言語であるかを気にする必要はありません

あなたの位置の問題は単純なCSSの問題です。ポップアップのtopとleftを50％に設定しました。これは、ポップアップの左上隅が、ページの死んだ中心から始まり、そこから右下に移動することを意味します。

ブラウザコンソールを使用して、HTML要素とそれに適用されるCSS規則を検査し、それに応じて調整します。コンソールを使用するとリアルタイムで調整の影響を見るためにライブ編集を行うことができます

Answer 2

オフセットが発生する理由は、画像がロードされる前にポップアップdivを中心とするマージンが計算されているためです。最初のクリックで、-37pxと-30pxのマージンがあることに注意してください。 1つの画像がロードされた後、別の画像を呼び出すと、最後にロードされた画像の幅と高さが使用されるため、予測できない結果が得られます。

イメージが以前にではなく読み込みに設定された後にサイズ変更するためのコールバックを作成する方法については、JQuery's load event handlerを参照してください。