WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

Lightbox

f:id:mmmmofu:20160814194414p:plain

画像をモーダルウィンドウで表示させるプラグイン

lokeshdhakar.com

デモはこちら

http://efu.sakura.ne.jp/web/lightbox/
(オプションはデフォルトのまま)

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>LightBox</title>
  <link rel="stylesheet" href="css/lightbox.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <style>
  html,body,h1,p,ul,li {
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-family:
      "Hiragino kaku Gothic ProN",
      Meiryo,
      sans-serif;
  }
  .modal {
  	width: 1000px;
  	margin: 200px auto 0;

  }
  .modal li {
  	width: 200px;
  	float: left;
  	list-style: none;
  }
  .modal li:hover {
  	opacity: 0.6;
  }
  .modal li img {
  	width: 100%;
  }
  </style>
</head>
<body>
  <ul class="modal">
  	<li><a href="img/01.jpg" data-lightbox="group" data-title="写真1"><img src="img/01.jpg" alt=""></a></li>
  	<li><a href="img/02.JPG" data-lightbox="group" data-title="写真2"><img src="img/02.JPG" alt=""></a></li>
  	<li><a href="img/03.jpg" data-lightbox="group" data-title="写真3"><img src="img/03.jpg" alt=""></a></li>
  	<li><a href="img/04.jpg" data-lightbox="group" data-title="写真4"><img src="img/04.jpg" alt=""></a></li>
  	<li><a href="img/05.jpg" data-lightbox="group" data-title="写真5"><img src="img/05.jpg" alt=""></a></li>
  </ul>
  <script src="js/lightbox.js"></script>
</body>
</html>

準備

公式サイトからファイルをダウンロードし、lightbox.csslightbox.jsを読みこむ
imagesフォルダの画像も使用するのでそのまま設置しておく

Lightboxを使用したい画像(サムネイル)をaタグで囲いリンク先に表示させたい画像をリンクさせる。

aタグに「data-lightbox」属性を記述する。
値は任意。何枚か画像がある場合は同じ値にするとグループ化され次へや戻るなどが使用できる。
「data-title」を記述すると画像が開いた時に下にキャプションが表示される。

オプション

lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
})

このように記述する。

オプション名 デフォルト 内容
alwaysShowNavOnTouchDevices false
albumLabel "Image %1 of %2" 画像の下にあるテキストの変更。デフォルトは"Image 現在の枚数 of 画像の総数"
disableScrolling false trueの場合Lightboxを開いている間スクロールができなくなる
fadeDuration 500 モーダルがフェードイン・フェドアウトするミリ秒数
fitImagesInViewport true trueの場合画面内に画像が収まるように画像サイズを変更する
maxWidth なし 画像の最大横幅
maxHeight なし 画像の最大高さ
positionFromTop 50 画像が表示された時、現在のウインドウトップからモーダルウインドウのトップの位置。(px)
resizeDuration 700 次の画像に行った際などに画像のサイズが違った場合のアニメーションミリ秒数
showImageNumberLabel true 画像の下にあるテキスト(Image 1 of 5など)を表示するか
wrapAround false trueの場合最後の画像にいったときも右の矢印(NEXT)が表示され、一番最初の画像に戻ることができる。(ループ)


最初JSの読み込みをheadの中にしていたら動かなかった。
bodyの直前にすると動いた。