JavaScriptを使わない、ページ移動せずにクリックで画像を拡大表示するCSS
ウェブサイトでページ移動せずにサムネイル画像を元の大きさに拡大表示したい場合は、LightBox系のjQueryプラグインを利用するのが定番です。けれど、シンプルなものなら、ちょっとしたCSSだけで実装できるんじゃないかと思い立って、試作してみました。
コード
CSS
.stylebox {
list-style-type: none;
padding: 0;
overflow: auto;
}
.stylebox li {
float: left;
margin: 0 2px 2px 0;
}
.stylebox .orig {
width: 0;
height: 0;
transition: all 0.3s ease;
}
.stylebox .tmb {
transition: all 0.3s ease;
}
.stylebox li:target .orig {
width: 100%;
height: auto;
}
.stylebox li:target .tmb {
width: 0;
height: 0;
}
余計な装飾や機能を省いたため、思いのほか簡素なCSSで実装できました。クラス名は、スタイルシートで作ったLightBox風の効果ということでStyleboxに。
HTML
<ul class="stylebox" id="stylebox-1">
<li id="pic-1">
<a href="#stylebox-1"><img class="orig" src="元画像のURL" width="Length" height="Length" style="max-width: Length;"></a>
<a href="#pic-1"><img class="tmb" src="元画像（もしくはサムネイル画像）のURL" width="Length" height="Length"></a>
</li>
<li id="pic-2">
<a href="#stylebox-1"><img class="orig" src="./example.jpg" width="480" height="270" style="max-width: 480px;"></a>
<a href="#pic-2"><img class="tmb" src="./example.jpg" width="115" height="64"></a>
</li>
</ul>
HTMLの色つき文字は、使用する画像に合わせた任意の数値です。元画像の<img>タグ内にあるmax-widthは、widthと同じ数値を指定します。
元画像はページと同時に読み込まれるため、別途サムネイル画像を用意するメリットがありません。サムネイル画像には、widthとheightを小さく指定して縮小表示した元画像を利用します。（サムネイル画像にこだわりがある場合は、それを指定しても動作します）
また、pic-nには連番を振ります。同一ページ内に複数のStyleboxを設置する場合は、stylebox-nにも連番を振ってください。
デモ
実際の動作は、Styleboxのデモページで確認できます。
解説
クリックの判別には、CSS3セレクターのターゲット擬似クラス（E:target）を利用しています。 画像ごとの<li>要素にアンカーリンク（#で始まるリンク）で飛ぶと、サイズを0にしておいた画像が元のサイズに戻る仕組みです。
IEがターゲット擬似クラスに対応したのはIE9からのため、それ以前のIEでは残念ながら動作しません。
それぞれの画像につき2つの<img>タグがあるのは、拡大した画像を再度クリックした場合にサムネイルに戻す仕組みを実現するために、アンカーリンクの指定先が違う画像が必要だからです。
後記
動作が若干がたつく以外は、なかなか面白い動きをするものが出来ました。CSSは、CSS3になって可能性が随分と広がったので、ささやかなものならJavaScriptを使わなくても実装できますね。CSS3に対応していない古いIEを今だに使い続けているユーザーが多いのが難点ですが……。
- タイトル:
- JavaScriptを使わない、ページ移動せずにクリックで画像を拡大表示するCSS
- カテゴリ:
- ウェブ制作
- 公開日:
- 2013年07月02日
- 更新日:
- 2014年04月15日
