クリックした画像を全画面表示
CSS
補足
- FRAME-IMG クラスがついた要素を全画面で表示し z-index でオーバーレイ表示している。
- さらに、全画面表示を閉じるボタンを、その上（手前）に表示されるよう z-index を設定している。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
jQuery
補足
- frame-img と clickable クラスがついた画像枠をクリックした時に、全画面用の画像枠を複製している。
- 同時に、全画面表示を閉じるためのボタンも追加している。
- 全画面表示を閉じるボタンをクリックした時に、そのボタンと全画面用の表示枠を削除している。
- デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
補足
- 画像枠の span 要素に frame-img に加えて clickable クラスをつけている。
- frame-img クラスは、画像をレスポンシブ対応させるためにつけている。
- spacer-1x1.png は１ピクセル×１ピクセルの透過PNG画像。実際に表示させる画像は data-bg 属性で指定している。
関連投稿
