【 jQuery 】 ライトボックス

jQueryライトボックスを紹介します。


ライトボックスアルゴリズム
ライトボックスは、サムネイルをクリックすることで本来の画像の大きさを表示させ、狭いスペースのなかで多くの写真を見るために利用される動作のためのプラグインです



ライトボックスのカスタマイズ
ライトボックスは、多くの種類のプラグインがありますがその都度いろいろ探すよりも、自分で基本的な仕組みを作ってしまったほうが早い場合があります


ライトボックスの動作の仕組み

  • 《B》がクリックされるとライトボックスを閉じる
  • 《B》はクリックされるとライトボックスを閉じる動作と、黒い半透明の背景をを敷いて《C》を目立たなくさせ、《A》のレイヤーに注目させるという効果をもつ
  • JavaScriptは《A》《B》のレイヤーの表示・非表示を切り替え、選択された画像を《C》のレイヤーの上に表示させる処理をしています