複数シリーズ切換え型フォトギャラリー2

 複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。先に、「複数シリーズ切換え型ギャラリー」で、切り替えるとサムネイルが流れ落ちるタイプを掲載している。このたびの「複数シリーズ切換え型フォトギャラアリー2」は、切換えボタンクリックで、サムネイルが格子状に拡大して登場するようにしたタイプである。
 なお、本稿のギャラリーは、Ie、Edgeには完全対応しているが、Firefox、Chromeではごく一部に非対応がある(実際上は問題にならないと思うが)。safariは、transformのtransitionには対応していないと思われ、対応不可である。ただし、いずれもWindowsのブラウザーの話で、MacOS上のブラウザでは試していない。
※最新のFirefox では、左のシリーズ切換え写真のマウスオーバーで、不具合が発生するので、CSSの、.ser_thumb:hover { 内のtransition記述を無効にするなどの必要がある。

準備

・サムネイル写真(150*100)、及び、表示用写真(600*400)を、htmlと同じディレクトリーの各シリーズごとに作られたフォルダに格納する。
 ここでは、img_kami、img_hodaka、img_yari、img_chyo。
・切換えボタン用の各シリーズの小写真を同じフォルダに格納する(s0.jpg)。

サンプル(DEMO)

 こちらの別ページに、HTMLとCSSのコードとともに示した。

HTMLのポイント説明

・ギャラリーの総枠は#stage。
・div #stage内に、切換え用小写真を左に縦に並べ、その右に、div #frameを置き、その中に、サムネイル9枚を格子状に、表示写真をすべて重ねて配置する。
・表示写真の閉じるボタンは、表示写真と同じdiv(.photo)内に置き、写真とともに見え隠れするようにした。
・他のシリーズの拡大写真が表示されているのに、切換えボタン小写真がクリックされたときの対応として、各小写真に、#P110(空)へのリンクを貼った(<a href=”#p110″>)が、これは、IeとEdgeに対応しているが、Firefox、Chromeには対応していない。この両ブラウザ用には、CSSで他のシリーズの.photoがopacity:0 になるようにして対応した。
・各サムネイルには、該当する拡大写真(.photo)へのリンクが貼ってあり、:targetでクリックイベントを認識している。

CSSのポイント説明

・切換えボタン用小写真は、初期値を、transform-origin: 0% 50%; transform: perspective(200px) rotateY(30deg);とし、台形に表示している。これに、transitionをセットして、マウスオーバーされたら、transform: perspective(0px) rotateY(0deg); で、起き上がるように矩形に戻している(Firefoxで不発)。
・それぞれのサムネイルは、初期値では、transform-origin: 50% 50%; transform: scale(0, 0); とし、中央に見えなくなるサイズ(0pix)で配置する。
・切換え小写真がクリックされると(#r1:checked など)、そのシリーズに該当するサムネイル群が transform: scale(1, 1); で一斉に拡大表示される。
・さらに、サムネイルがクリックされると、該当する写真(:target)がフェイドインで表示される。
・写真とともに表示される、閉じるボタンがクリックされると、これには、空の写真がリンクされている(a href=”#p110″)ので、サムネイル群表示に戻る。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>