Lightbox

Lightbox

  • JavaScriptライブラリ
  • Ajax（JavaScript）を利用して動作する機能をまとめてあるもの
  • Ajaxは「Asynchronous JavaScript + XML」の省略語
  • JavaScriptを利用して非同期通信を行いXMLデータでサーバーとのやりとりを行うもの


http://lokeshdhakar.com/projects/lightbox2/


（1）「DOWNLOAD」ボタンを押してダウンロードします。


（2）ローカル上（またはテストサーバー上）で、サイト構築をします。



（3）練習に必要な部分のみに編集します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Lightbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/screen.css">
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
</head>
<body>

<section id="examples" class="examples-section">

<div class="container">

<h2>Examples</h2>
<h3>Two individual images</h3>
<div class="image-row">
<a class="example-image-link" href="img/画像ファイル名１" data-lightbox="example-1"><img class="example-image" src="img/画像ファイル名１" alt="image-1"></a>
<a class="example-image-link" href="img/画像ファイル名２" data-lightbox="example-2" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名２" alt="image-1"></a>
</div>

<h3 style="clear: both;">Four image set</h3>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/画像ファイル名３" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名３" alt=""></a>
<a class="example-image-link" href="img/画像ファイル名４" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名４" alt=""></a>
<a class="example-image-link" href="img/画像ファイル名５" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名５" alt=""></a>
<a class="example-image-link" href="img/画像ファイル名６" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名６" alt=""></a>
</div>
</div>

</div>

</section>

</body>
</html>


※可能であれば、この時点で自前の写真と置き換えます。

スクリプト（ライブラリを読み込む）
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
スタイルシート（スタイルシートを読み込む）
<link rel="stylesheet" href="css/screen.css">
<link rel="stylesheet" href="css/lightbox.css">
画像は自動リサイズ
  • サムネールは、CSSでクラス名「example-image」で横幅を指定することにより自動的に高さが算出されて表示されます
<img class="example-image" src="img/画像ファイル名" alt="">
  • 「screen.css」内を検索して、クラス名「example-image」の幅の値を変更してみます
  • remは、「root」+「em」という意味：root要素（html要素）のフォントサイズを継承するので階層が深くなってもフォントサイズが大きくなっていくことはありません
.example-image {
  width:7rem;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
  border-radius:5px;
}
  • 7remを「10rem」に変更します（16pxの10文字分相当の横幅）
カスタマイズ


背景の色を変更（デフォルトでは黒い部分）

  • lightbox.cssの一「.lightboxOverlay」のbackground-color: black;となっているところを任意の色に変更する
  • 背景色の不透明度は「opacity: 1.00;」で、透明度なし
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}


画像周りの色を変更（デフォルトでは白い部分）

  • .lb-outerContainerの「background-color」と「border-radius」で角の丸みと同時に指定する
  • 白が最もバランスがよい
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
  • クリックされると、幅250px、高さ250pxの大きさ（初期値）から100％まで拡大される


解説文の文字色を変更（デフォルトでは#ccc）

.lb-data {
  padding: 0 4px;
  color: #FFF;
}


拡大スピードとフェード

  • 「lightbox.js」
  • １秒は「1000」で指定する
  • 「this.fadeDuration = 500;」と「this.resizeDuration = 700;」の数値を変更する
  var LightboxOptions = (function() {
    function LightboxOptions() {
      this.fadeDuration = 500;
      this.fitImagesInViewport = true;
      this.resizeDuration = 700;
      this.positionFromTop = 50;
      this.showImageNumberLabel = true;
      this.alwaysShowNavOnTouchDevices = false;
      this.wrapAround = false;
    }

その他のLightBox