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

準備

・サムネイル写真（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″）ので、サムネイル群表示に戻る。