CSS によるスクロール式フォトギャラリーの例

スクロールボックス内のサムネイル画像にマウスを重ねると、左側に拡大画像とタイトルやコメントが表示され、クリックすると 保持するフォトギャラリーです。画像は「フリー画像素材 EyesPic 」の素材を使用しています。

画面幅 740px 以上のモバイルまたは PC でご覧ください。

ブラウザによる表示の違い

通常は下記の動作をしますが、ブラウザにより違った動作になります。

基本動作

  1. サムネイル画像上にマウスが重なるとその拡大画像を表示、クリックすると保持します。
  2. サムネイル画像の外側をクリックすると、拡大画像はデフォルト画像に戻ります。

Gecko系（Mozilla、Firefox）は上記の動作しますが、IE、Opera の古いバージョンは、スクロールバーをクリックしてもデフォルト画面に戻ります。
※最近のモダンブラウザ（MS Edge、Chrome、Firefox、Opera）は、上記の基本動作をします。（2016年 2月）

ご紹介した CSSplay サイトで、ネガフィルムをリアルに表示し、画像の説明文を拡大画像に重ねて表示するタイプのフォトギャラリー 「A filmstrip scrolling gallery 」が公開されました。（30th July 2009）
主要なブラウザ IE6〜、Firefox、Opera、Safari、の古いバージョンでも同じ表示をします。使用する場合は、こちらのギャラリーをお薦めします。商用としては許可が必要です。掲題のサンプルはご参考まで。。。


戻る >> Top↑