Lightbox
サンプル
別窓概要
公式
画像をクリックすると画面がグレーアウトして、クリックした画像がポップアップされたように出てきますね。
できる対象は画像のみです。（たぶん）
テキストでやりたい、別のページを表示させたいなどはfeatherlightへどうぞ。
2019.06
やりかた
まずは公式サイト開いてすぐのDOWNLOADボタンを押してlightbox2-master.zipを手に入れ、解凍しましょう。
色々ありますが使うのはdistのみです。distフォルダごと自サイトの場所へコピーします。
なお、参照関係があるので、distフォルダ内はファイルの移動や名前の変更をしないようにしましょう。
<head>～</head>内に以下のコードをコピペします。
<link rel="stylesheet" href="ファイルの場所/dist/lightbox.min.css"> <script src="ファイルの場所/dist/lightbox-plus-jquery.min.js"></script>
<script>は</body>直前に置くとはやくなるらしいですが、気にする人がやればいいでしょう。
ファイルの場所は移動させたところに書き換えてくださいね。
次は使用したい画像のタグを編集します。
サンプルのタイプ1のように、画像1枚にlightboxを効かせるには、以下のようにクリック元にリンクを貼りましょう。
リンクを貼るだけなので、クリック元は画像でなくて文字でも可能です。
<a class="example-image-link" href="画像1の場所/画像1.jpg" data-lightbox="img-1" data-alt="画像1" data-title="ここにキャプションを入れられます。">
<!-- ここにクリック元の画像<img>や文字<a>が入る。 -->
<!-- <img class="example-image" src="画像1の場所/画像1.jpg" /> -->
</a>
<a class="example-image-link" href="画像2の場所/画像2.jpg" data-lightbox="img-2" data-alt="画像2" data-title="ここにキャプションを入れられます。">
<!-- ここにクリック元の画像<img>や文字<a>が入る。 -->
<!-- <img class="example-image" src="画像2の場所/画像2.jpg" /> -->
</a>
サンプルのタイプ2のように、画像グループで、lightbox上で移動できるようにしたいときは、グループのdata-lightboxをすべて同じ値にして、
以下のように連ねて書けばOKです。
<a class="example-image-link" href="画像1の場所/画像1.jpg.jpg" data-lightbox="img-group" data-title="キャプション">
<!-- ここに1番目の画像を出すクリック元の画像<img>や文字<a>が入る。 -->
<!-- <img class="example-image" src="画像1の場所/画像1.jpg" /> -->
</a>
<a class="example-image-link" href="画像2の場所/画像2.jpg.jpg" data-lightbox="img-group" data-title="キャプション">
<!-- ここに2番目の画像を出すクリック元の画像<img>や文字<a>が入る。 -->
</a>
<a class="example-image-link" href="画像3の場所/画像3.jpg.jpg" data-lightbox="img-group" data-title="キャプション">
<!-- ここに3番目の画像を出すクリック元の画像<img>や文字<a>が入る。 -->
</a>
各href、data-titleは書き換えてくださいね。
data-altには画像の代替文字列が、data-titleにはキャプションが入れられますが、不要な場合はdata-alt、data-titleごとなくて大丈夫です。
これでlightboxが設置できるはずです。
オプションなど
その他細かい部分を変える方法です。物足りない方はやってみてください。
<script src="ファイルの場所/dist/lightbox-plus-jquery.min.js"></script>の下に次のように記述します。
<script src="ファイルの場所/dist/lightbox-plus-jquery.min.js"></script>
<script>
lightbox.option({
//'オプション名': 値,
'albumLabel': "%2枚中の%1番目",
'wrapAround': true,
})
</script>
これは画像グループの下部に出る表示を「image 1 of 3」から「3枚中の1番目」に変更し、さらに画像グループをループできるようにしています。
以下が設定できるオプション一覧です。設定したい項目の分だけ「'オプション名': 値」を,で区切って羅列してください。
| オプション名 | デフォルト | 効果 |
|---|---|---|
| alwaysShowNavOnTouchDevices | false |
スマホで表示した時に、画像グループで左右の移動ボタンを常に表示するかどうかの設定です。 trueで常に表示します。 |
| albumLabel | "Image %1 of %2" |
画像グループのときにlightbox下部に表示される「image 1 of 3」の文字列の設定です。 %1は現在何番目かの数値が入り、%2には全部の数が自動的に表示されます。 例えば"%2枚中の%1番目"と指定すれば「3枚中の1番目」のように表示され、 "No.%1"と指定すれば「No.1」のように表示されます。 必ず"か'で囲ってください。 そもそもこの表示自体がなくていいという方はshowImageNumberLabelを参照してください。 |
| disableScrolling | false |
lightboxが開いている間、スクロールができるかできないかの設定です。 trueの場合、スクロールができなくなります。 ※bodyのoverflowがhiddenになっているときのみ可能です。 |
| fadeDuration | 600 |
クリックしてからlightboxが開くまで、またlightboxを閉じてから完全に閉じるまでのフェードしている時間です。 単位はミリ秒です。 |
| fitImagesInViewport | true |
trueにすると、画像が画面サイズより大きい時、スクロールしなくても画像全体が見えるように、画像を縮小して表示します。 |
| imageFadeDuration | 600 |
lightboxが開いてから、画像が出るまでのフェードしている時間です。 lightboxが開く時間と画像が表示される時間を変えたいときに設定します。 単位はミリ秒です。 |
| maxWidth |
画像の幅の最大値です。設定すると、その大きさに画像が収まります。縦横比は無視されます。 単位はピクセルです。 |
|
| maxHeight |
画像の高さの最大値です。設定すると、その大きさに画像が収まります。縦横比は無視されます。 単位はピクセルです。 |
|
| positionFromTop | 50 |
画面の上端からlightboxが表示される位置までの値です 単位はピクセルです。 |
| resizeDuration | 700 |
画像グループで左右ボタンの移動をした時に画像のサイズが異なる場合に、lightboxのリサイズにかける時間です。 単位はミリ秒です。 |
| showImageNumberLabel | true | falseにするとalbumLabel（画像グループのときにlightbox下部に表示される「image 1 of 3」）を表示しません。 |
| wrapAround | false |
trueにすると、画像グループの移動がループできるようになります。 画像グループすべてのlightboxに左右移動ボタンが表示され、最初の画像と最後の画像間の移動が可能になります。 |
他に、lightbox.min.cssをいじることで配色変更などができます。
cssがいじれる方はいろいろカスタマイズしてみてください。
一例ですがlightboxOverlayのbackground-colorがグレーアウトしている部分の色指定がここです。
.lightboxOverlay{
position:absolute;
top:0;
left:0;
z-index:9999;
background-color:#000; /* ここ */
filter:alpha(Opacity=80);
opacity:.8;
display:none
}
上記は見やすくしてありますが、実際のlightbox.min.cssは1行になっていますので編集する際は気を付けてください。
lightboxの×ボタンや左右移動の＞＜などの画像を他の画像にしたいときは、dist/imagesフォルダ内の各画像を差し替えてください。