CSS3を使用してLightBoxを使用する

htmlの画像サムネイルから選択された画像を拡大表示させたい時に、様々なプラグインがあります。私が中でも好きなのものに"LightBox"があります。ただ、Javascriptを使用するんですよね。それが少し面倒でもっと手軽にと考えていたら、CSSのみで実現する方法があったんですね。覚書程度に。

まずはhtml。ポップアップのきっかけとなるのはページ内リンクとなる。下の例では画像をクリックするとポップアップが立ち上がるようになる。

html

<div class="lightbox">
  <div class="previewbox">
    <a class="previewlink" href="#sample1">
      <img class="previewimg" src="sample1.jpg">
    </a>
  </div>
  <div class="popupbox" id="sample1">
    <a class="popuplink" href="#close">
      <div class="popupimgBG">
        <img class="popupimg" src="sample1.jpg">
      </div>
    </a>
  </div>
</div>

続いてCSS。ポイントはポップアップさせる要素をあらかじめdisplay:none;に設定しておく。そして、CSSセレクタの属性":target"を使用してDisplayの値を設定してあげれば、ページ内リンクで飛んできた箇所がモーダルウィンド風にポップアップするようになる。

CSS

.popupbox {
    height: 100%;
    width: 100%;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
    display: none;
}
.popupbox:target {
  display:table;
}
.popuplink {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.popupimg {
  background-color:#fff;
  display:block;
}
.popupimgBG{
  display:inline-block; 
  background-color:#FFF; 
  padding:10px;
}
.previewimg{
  max-height:180px;
  max-width:180px;
}