スクロールボックス内のサムネイル画像にマウスを重ねると、左側に拡大画像とタイトルやコメントが表示され、クリックすると 保持するフォトギャラリーです。画像は「フリー画像素材 EyesPic 」の素材を使用しています。
A Scrolling Photograph Gallery
ブラウザによる表示の違い
通常は下記の動作をしますが、ブラウザにより違った動作になります。
基本動作
- サムネイル画像上にマウスが重なるとその拡大画像を表示、クリックすると保持します。
- サムネイル画像の外側をクリックすると、拡大画像はデフォルト画像に戻ります。
Gecko系（Mozilla、Firefox）は上記の動作しますが、Firefox 3 は表示が少し遅いようです。 IE6、IE7、Opera10 はスクロールバーをクリックしてもデフォルト画面に戻ります。IE8 は外側のどこをクリックしてもデフォルト画面には戻りません。 Opera9 はクリックしても保持せず、スクロールすると拡大画像もスクロールします。
ご紹介した CSSplay サイトで、ネガフィルムをリアルに表示し、画像の説明文を拡大画像に重ねて表示するタイプのフォトギャラリー
「A filmstrip scrolling gallery 」が公開されました。（30th July 2009）
主要なブラウザ IE6、IE7、IE8、Firefox、Opera10、Safari、Google Chrome で同じ表示をします。使用する場合は、こちらのギャラリーをお薦めします。商用としては許可が必要です。
掲題のサンプルはご参考まで。。。
