先に公開した同型のギャラリーは、枚数が増えるとその数だけラジオボタンを設置する必要があるなど、CSSの記述が煩雑になるので、このたびは、target疑似クラスを使ってその点を改良したのと、いくつかの記述上の工夫を加えた。レスポンシブ対応型である。
JqueryのプラグインFancyBoxを意識して作ってみたが、まあまあ、それらしいものができたと思う。
サンプル
実装サンプルは、こちらの別ページにあります。
ボタン類画像の用意
・あらかじめ、送りボタン（next.gif）、戻りボタン（prev.gif）、閉じるボタン（end.gif）の各画像を作成し、サーバーにアップロードしておく
・サンプルではimagesフォルダに格納していますが、HTMLで設定フォルダにパスを通してください。
HTMLのポイント解説
・target疑似クラスでクリックイベントを認識するには、イベント元から、表示要素に a href でリンクを貼る必要がある。
・targetを認識する要素div（.photo）それぞれには、画面を覆う半透明の黒色スクリーンdiv（.dark）、スライド写真、ボタン類を配置している。
・.darkに#P11（何も中身がないので初期画面に戻る）をリンクさせている。
・スライド、ボタン類を配置しているdiv（.frame）は、cssでtransitionを使って、FadeIN/Outさせる。
・スライド送りは、以前にも実装したように、写真の右側（40%）部にカーソルがのったら右送りボタンが表示され、矩形平面部のクリックでスライドが送られるようにしている。左も同様である。
CSSのポイント解説
・サムネイルはlist形式で記述し、max-width:800pxのdiv（.contnr）に並べる。
・.photoおよび.darkは、画面全域。
・.frameは、横幅を画面幅の80%に指定し、画面中央に配置する。中央配置は、positionをabsoluteにし、top:50%、left:50%に指定、transform:translate(-50%,-50%)で、写真縦横サイズの半分を補正して配置している。
・ボタン類は、スライド写真のコーナーや左右の端に配置しているが、画面サイズの変化によって、多少ずれる。