どもです。
やっぱりCMSよりCSSな餅。です。
とある古いサイトをipad等に対応させるため、Flashだった建物内マップをjsにする
という仕事がありました。
マップにはlightboxを設置するということだったので、積み込んでいざ稼動テスト…、
ここまでは良かったのですが、
・積んであるjQueryが古く、jsプラグインが積み込めない
・jQueryを更新すると既存のjsが動かなくなる
・そもそも積んであるjsプラグインが多すぎてどれがどれやらわからない
というカオスな状況になりました。
複数のjsを読み込む方法、なんてのも調べたらありましたが、何か間違えたのか失敗しまして。
もう面倒臭くなったので、ライトボックスもCSSで作ることにしました。
原理は、以前の記事（CSSでフローティングウィンドウもどき）と同じで、透明化したチェックボックスを使用し、隣接するラベルのスタイルを変更する、というものです。
jsのライトボックスはboxの外をクリックすると元に戻るのが一般的なので、ラベルをfixedで縦横100%固定してしまいましょう。
<input id="floatwindow01" type="checkbox" ><label for="floatwindow01"><img src="画像URL"><span>画像の説明文</span></label>
input[type="checkbox"]:checked + label {
display:block;
position:fixed;
width:100%;
height:100%;
left:0px;
top:0px;
right:0px;
bottom:0px;
background:rgba(255,255,255,0.5);
z-index:999;
}
input[type="checkbox"]:checked + label img {
display:block;
position:relative;
left:auto;
top:10%;
height:80%;
width:auto;
margin:0 auto;
z-index:9999;
}
input[type="checkbox"]:checked + label span {
display:block;
position:absolute;
width:100%;
top:auto;
left:0;
bottom:0;
border-radius:0;
background:#608c10;
color:#fff;
z-index:9999;
text-align:center;
}
input{
position:absolute;
opacity:0;
}
display:block;
position:fixed;
width:100%;
height:100%;
left:0px;
top:0px;
right:0px;
bottom:0px;
background:rgba(255,255,255,0.5);
z-index:999;
}
input[type="checkbox"]:checked + label img {
display:block;
position:relative;
left:auto;
top:10%;
height:80%;
width:auto;
margin:0 auto;
z-index:9999;
}
input[type="checkbox"]:checked + label span {
display:block;
position:absolute;
width:100%;
top:auto;
left:0;
bottom:0;
border-radius:0;
background:#608c10;
color:#fff;
z-index:9999;
text-align:center;
}
input{
position:absolute;
opacity:0;
}
システム的にはたったのこれだけ。
デザインはお好みでどうぞ。