タイプのフォトギャラリーを、既に2つほど紹介したが、ここでは、画面のサイズに応じて表示写真の大きさが、最大サイズ以下の範囲で変化するものになっている。フルHDの写真を使いたい場合や、小さな解像度のデバイス向けを考慮したい場合などを配慮したものである。ここで紹介するサンプルは、サムネイルクリックでフェイド・インし、大きなサイズの写真が表示されてからは、左右送りボタンでスライド・イン/アウトするタイプである。大きなサイズの写真が、画面横幅の62%幅で表示されるようにしているが、極端な場合は、幅1920pxの写真を用意すれば、100%表示も可能となる。させるため、サムネイルに関連付けている。それぞれ閉じるボタンと遮蔽スクリーンに関連付けられていて、このクリックで初期画面に戻る。左側の次のスライドを登場させるボタン領域に関連付けている。それぞれ、写真とキャプションと閉じるボタンを含んだdivで、この全体を切り替える方式になっている。・ボタン領域とは、各写真の上層に配置した、左40%の領域を覆う矩形(cover_left)と、右40%の領域を覆う矩形(cover_right)で、各領域のマウスオーバーで左右の矢印が表示され、そのクリックで左右のスライドに表示が切り替わるもの。#darkscreen、ボタン領域などについては、前稿「Fadein型」に同じ。現在表示スライドを左に移動・FadeOutと次のスライドを右から移動して表示を同時に行うアニメーションを設定している。現在表示スライドを右に移動・FadeOutと次のスライドを左から移動して表示を同時に行うアニメーションを設定している。・上記2つのアニメーションは、Ieとchromeでは単純な記述でうまく機能したが、Firefoxでは苦戦した。したがって、少しくどいスクリプトになっている。:参考にさせていただきます。CSSだけでコーディングしてるのが凄いです。古いブラウザでも割と対応しているのでありがたいです。:お役に立ててうれしいです。コメントをキャンセルメールアドレスが公開されることはありません。フォトギャラリー・スライドショ。