CSS3 lightbox Snippet and add IE support Example

image01

ライトボックスをCSSで作成する

cssだけで動作するLightboxは、洗練された見本がすでにWEBにあります

codrops等で見ることが出来ますが、これらのライトボックスは、どんな風にしてCSSだけでライトボックスの表示を可能にしているのでしょうか?

結論から言うと、CSSの:targetセレクタが表示非表示の主な役割をになっています

:target

このページでは、装飾的なスタイルを取り除いて、ライトボックス表示そのものがどのような仕組みで動くのか、最小限のスタイルを使っています

ただ、この方法は、大抵のモダンブラウザでは動作しますが、IEは:targetをサポートしていないために、IE用のスクリプトも作ってみています

このファイルは、ブログの記事の、でも用のファイルとして制作しました

ご意見は、ブログのほうにお願いします。

html source

<!-- light box settings-->
<a href="#image-1" class="raindrops-light-box">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/t/tenman/20101113/20101113102505.jpg" alt="image01" class="thumb">
</a>
<div class="raindrops-lightbox-overlay" id="image-1">
<a href="#page" class="lb-close">Close</a>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/t/tenman/20101113/20101113102505.jpg" alt="image01" />
</div>
<!-- light box settings end-->

CSS

.raindrops-light-box{
position: relative;
background: #f1d2c2;
cursor:pointer;
}
.raindrops-lightbox-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
} .raindrops-lightbox-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
}
.raindrops-lightbox-overlay img{
/*For Opera*/
max-height: 100%;
position: relative;
}
.raindrops-lightbox-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
background:rgba(52,52,52,0.3);
}
.raindrops-lightbox-overlay:target a.lb-close,
.raindrops-lightbox-overlay:target > div{
opacity: 1;
}
x:-o-prefocus, .raindrops-lightbox-overlay img {
height: 100%;
}
.thumb{
width:120px;
height:160px;
}
article{
padding:30px;
}

IE follow

<!--[if IE]> <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function() {
$(".raindrops-light-box").click(function(){
$('.raindrops-lightbox-overlay').removeAttr('style').css({"width":"100%","height":"80%",'padding': '50px','margin':'auto'});
$('body').css({'background':'#ccc'});
});
$(".lb-close").click(function(){
$('.raindrops-lightbox-overlay').hide();
$('body').removeAttr( 'style' );
});
});
</script>
<![endif]-->