htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたのですが、input type=”radio”を使えばURLを汚すことなくギャラリー制作できると知ったのでサンプルとメモを残しておきます。
ギャラリーに限らずスライドにも応用できると思います。
なお、最初に申し上げておくと面倒くさい作業なので、javascript jQueryのありがたみを感じることができます。
動作サンプル
See the Pen Image Gallery without jQuery by Takashi Abe (@TakeshiAbe) on CodePen.
radioボタンをnameでグループ化しておき、選択されたボタンに連動してギャラリーの入れ替えるシンプルなものです。
display属性で出し入れしようとすると上手く動作しなかったので、left: -9999px → left:0; で切り替えています。
:targetクラスとの違い
モーダルなどに使用できる :targetクラスですが、URLにid値がセットされてしまうという難点がありました。
デモボタンが押されました
なので、ブラウザの戻る機能で前ページに戻ろうとすると、素直に前のページに戻れないという弱点がありました。
その点、今回のイメージギャラリーはradioボタンで切り替えているだけでURLは一切変更されません。
おとなしくcolorboxなり自作jsに頼るのがベストですが、どうしてもcssしか使えないときにお使いください。
