読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

モーダルウィンドウ - Lightbox

jQuery

モーダル (modal) ウィンドウ

  • モーダルウィンドウとは、操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことを指します

Lightbox

  • JavaScriptライブラリ
  • AjaxJavaScript)を利用して動作する機能をまとめてあるもの
  • 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">
</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/画像ファイル名1" data-lightbox="example-1"><img class="example-image" src="img/画像ファイル名1" alt="image-1"></a>
<a class="example-image-link" href="img/画像ファイル名2" data-lightbox="example-2" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名2" 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/画像ファイル名3" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名3" alt=""></a>
<a class="example-image-link" href="img/画像ファイル名4" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名4" alt=""></a>
<a class="example-image-link" href="img/画像ファイル名5" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名5" alt=""></a>
<a class="example-image-link" href="img/画像ファイル名6" data-lightbox="example-set" data-title="写真の説明文"><img class="example-image" src="img/画像ファイル名6" alt=""></a>
</div>
</div>

</div>

</section>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
</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」
  • 1秒は「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;
    }