どのテクニックを使用して、Facebookの画像を表示しますか？

Question

Facebookで画像サムをクリックすると、オーバーレイで完全な画像が読み込まれることがわかりました。私はちょうどこのツールが何であるかを知ることに興味がありました。

オーバレイが画面を占め、スクロールバーがオーバーレイのサイズに合わせて調整されているがページ自体は調整されていないことがわかるように、画像を表示するのに「jQueryモーダル」を使用しているのは明らかです。これはjQueryモーダルの場合ではありません。私はEric martin's Simple modalのようないくつかのモーダルを見上げたが、運はなかった。

このFacebookのような効果を達成できるプラグインを誰かが知っていますか？

Answer 1

Facebookは、jQueryモーダルのようなすぐに使用できるプラグインを使用するのではなく、独自のクライアントサイドライブラリを作成していると思います。

だけで行動を観察することによって、私は自分のスクリプト

を期待する（a）の未亡人の大きさを（ポップアップがビューポートを埋めるためにスケールダウンれるように）チェックし、その後、 （b）は、画像のサイズをチェック

...コメントと広告/その他のスペースを残した後、オーバーレイのdivを設定する正確なサイズがわかります。画像そのものは、利用可能な空間に収まるように拡大/縮小されます。

オーバーレイ自体の内部にスクロールバーを配置することについては、これはcss overflow: auto;を使用して固定サイズ（つまり、高さ/幅の設定）の任意の要素で達成できます。そのスタイルを持つブロック要素は、内容が要素の大きさより大きい場合、スクロールバーを表示します。