tyosbb複数シリーズのサムネイル群を、ボタンクリックで切り替え、サムネイルのクリックで写真がFadeIn表示されるタイプのギャラリーである。先に、「複数シリーズ切換え型ギャラリー」で、切り替えるとサムネイルが流れ落ちるタイプを掲載している。このたびの「複数シリーズ切換え型フォトギャラアリー2」は、切換えボタンクリックで、サムネイルが格子状に拡大して登場するようにしたタイプである。本稿のギャラリーは、Ie、Edgeには完全対応しているが、Firefox、Chromeではごく一部に非対応がある(実際上は問題にならないと思うが)。safariは、transformのtransitionには対応していないと思われ、対応不可である。いずれもWindowsのブラウザーの話で、MacOS上のブラウザでは試していない。内のtransition記述を無効にするなどの必要がある。最新のFirefoxでは不具合はありません。・サムネイル写真(150*100)、及び、表示用写真(600*400)を、htmlと同じディレクトリーの各シリーズごとに作られたフォルダに格納する。ここでは、img_kami、img_hodaka、img_yari、img_chyo。・切換えボタン用の各シリーズの小写真を同じフォルダに格納する(s0.jpg)。サンプル(DEMO)こちらの別ページに、HTMLとCSSのコードとともに示した。・ギャラリーの総枠は#stage。#frameを置き、その中に、サムネイル9枚を格子状に、表示写真をすべて重ねて配置する。・表示写真の閉じるボタンは、表示写真と同じdiv(.photo)内に置き、写真とともに見え隠れするようにした。href=”#p110′′>)が、これは、IeとEdgeに対応しているが、Firefox、Chromeには対応していない。なるようにして対応した。・各サムネイルには、該当する拡大写真(.photo)へのリンクが貼ってあり、:targetでクリックイベントを認識している。rotateY(30deg);とし、台形に表示している。起き上がるように矩形に戻している(Firefoxで不発)。し、中央に見えなくなるサイズ(0pix)で配置する。一斉に拡大表示される。・さらに、サムネイルがクリックされると、該当する写真(:target)がフェイドインで表示される。href=”#p110′′)ので、サムネイル群表示に戻る。コメントをキャンセルメールアドレスが公開されることはありません。フォトギャラリー・スライドショ。