クリックした画像を全画面表示

クリックした画像を全画面（オーバーレイ）で表示。

デモページを表示

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 属性で指定している。

関連投稿

• スクロール時に画像を遅延読み込み（アスペクト比指定＆レスポンシブ対応）
• 正方形でない画像を正方形内に表示（レスポンシブ対応）

スクロール時に画像を遅延読み込み（アスペクト比指定＆レスポンシブ対応）

スクロール時にウィンドウに入ってきた画像を、順次遅延読み込みする（アスペクト比指定＆レスポンシブ対応）。

デモページを表示

CSS

補足

• 28～63行目：クラス aspect-4x3、aspect-3x2、aspect-16x9 により、表示する画像のアスペクト比を指定できるようにしている。これらを指定しない場合、表示される画像は正方形にトリミングされる。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• jQueryは前記事 スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）） と変更なし。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• ここで使用しているサンプル画像のアスペクト比は４対３。
• span 要素に frame-img クラスだけが設定されている場合は、正方形にトリミングされて表示される。
• span 要素の frame-img クラスに加えて、aspect-4x3、aspect-3x2、aspect-16x9 のいずれかを指定すると、そのアスペクト比で画像がトリミングされて表示される（表示する画像とアスペクト比が同じ場合はトリミングされない）。

関連投稿

• スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）
• 画像のレスポンシブ対応

スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）

スクロール時にウィンドウ内に入ってきた画像を、順次遅延読み込みする。このサンプルでは画像の縦横比に関係なく正方形でトリミング＆レスポンシブ対応。

デモページを表示

CSS

補足

• 13～17行目：img 要素（透過PNG画像）の背景画像として表示させる設定。
• 19～26行目：画像コンテナの背景にローディング画像を表示する設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 3行目：data-bg 属性が付いた img 要素が対象。
• このサンプルでは、スクロール時に画像の上端がウィンドウ高さの半分を超えたら、data-bg 属性で指定した画像が表示されるようにしている。
• 11行目：画像の遅延表示後は data-bg 属性を削除。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 2～5行目：img 要素の data-bg 属性で遅延表示する画像を指定する。
• このサンプルでは、元の画像の縦横比に関わらず、正方形にトリミングされて表示される。

関連投稿

• 画像のレスポンシブ対応

正方形でない画像を正方形内に表示（レスポンシブ対応）

正方形ではない画像を、正方形にトリミングしたり、縦横比を維持したまま正方形内に表示する（レスポンシブ対応）。

デモページを表示

CSS

補足

• 13～17行目：img 要素（透過PNG画像）の背景画像のスタイルを設定している。
• 19行目：frame-img クラスに加えて round クラスを設定すると正円でトリミングされる。。
• 23行目：frame-img クラスに加えて contain クラスを設定すると正方形内に縦横比を維持したまま表示される。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 4～6行目：img 要素の data-bg 属性で指定したファイルを img 要素（透過PNG画像）の背景画像に設定している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• img 要素の src 属性には１ピクセル×１ピクセルの透過PNG画像を指定し、実際に表示する画像は data-bg 属性で指定する。
• 3行目：frame-img クラスだけの時は正方形にトリミングされる。
• 6行目：frame-img と round クラスを設定すると正円にトリミングされる。
• 9・12行目：frame-img と contain クラスを設定すると縦横比を維持したまま正方形に収まるように表示される。

関連投稿

• 画像のレスポンシブ対応

マウスオーバーで画像をズームアップ

画像のレスポンシブ対応 で表示した画像をマウスオーバーした時にズームアップする。

デモページを表示

CSS

補足

• 3行目：ズームアップ時に、はみだした部分を表示しない。
• 8行目：ズームアップ時のスピードを設定。
• 12行目：ズームアップ時の拡大率を設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• frame-img クラスに加えて hover-zoom クラスを追加する。

関連投稿

• 画像のレスポンシブ対応

画像のレスポンシブ対応（画像上にキャプション表示）

画像のレスポンシブ対応 の画像上にキャプション表示する。

デモページを表示

CSS

補足

• 2行目：キャプションの位置を決めるために追加。
• 9行目以降：キャプションの位置やスタイルを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• frame-img クラスを付けた span 要素内、img 要素に続けて em 要素でキャプションを指定する。

関連投稿

• 画像のレスポンシブ対応

画像のレスポンシブ対応

ウィンドウ幅やブロック要素の幅の変化に合わせて、画像の縦横比を維持したまま、拡大・縮小表示（レスポンシブ対応）する。

デモページを表示

CSS

補足

• frame-img は画像のコンテナに付けるクラスで、画像周りの枠線や余白設定に使える。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• span 要素に frame-img クラスを付け、その中に img 要素を置く。