jQueryのプラグイン、ImageLightboxという物を使ってみたので、メモ。公式サイトのサンプルとは微妙に違って詰まったので参考になれば。
ちなみに、同じような名前のプラグインはいっぱいあるのでわかりにくいですが、以下のものです。
そもそもImageLightboxってなんだ？
jQueryのプラグインの一つで、jQueryとセットで使うことで、画像をクリックすると画面中央に大きく表示されるアレを実現するものです。ブラウザの画面サイズによってフレキシブルにレイアウトを変動させる、レスポンシブレイアウトに対応しているのと、非常に軽いのが特徴らしい。
導入方法
導入方法も非常に簡単。該当となるHTMLファイルに、jQueryとImageLightboxを参照させるだけです。そして、Lightbox用のスタイルを指定して、Lightboxを表示させたい画像を<a>で囲ってあげればOKです。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 中略 -->
<link rel="stylesheet" href="./main.css" type="text/css" />
</head>
<body>
<!-- 中略 -->
<a href="[Lightboxに表示したい画像のパス]" data-imagelightbox="a" class="attachimage" title="[画像のヒント文字列]"><img src="[サムネイル画像のパス]" alt=" " class="attachimage"></a>
<a href="[Lightboxに表示したい画像のパス]" data-imagelightbox="a" class="attachimage" title="[画像のヒント文字列]"><img src="[サムネイル画像のパス]" alt=" " class="attachimage"></a>
<a href="[Lightboxに表示したい画像のパス]" data-imagelightbox="a" class="attachimage" title="[画像のヒント文字列]"><img src="[サムネイル画像のパス]" alt=" " class="attachimage"></a>
<!-- 中略 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./lightbox/imagelightbox.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
#imagelightbox {
position: fixed;
z-index: 9999;
-ms-touch-action: none;
touch-action: none;
}
$( function()
{
$( "a.attachimage" ).imageLightbox({
});
});
これで最低限の処理は完成。公式サイトのサンプルに書かれているid="imagelightbox"は現時点のバージョンでは必要ありません(ライブラリ側で勝手に生成されるようです)。よって、スタイルシートで#imagelightboxにスタイルを指定してあげればそれだけでOKです。
ちなみに、<a>タグについているdata-imagelightboxは、画像をグループ化する記述で、初期状態だとLightboxで表示されている画像をクリックすると、同じグループの画像が順番に表示されるようになっています(タブレット上ではスワイプにも反応します)。
ImageLightboxをカスタマイズする
公式サイトのサンプルギャラリーを見ると、Lightboxクリック時に背景が淡い色なったり、キャプションが表示されたりと色々なカスタマイズが行われています。
これらはどうやるのかというと、ImageLightbox表示時や非表示時のイベントで、独自に要素を表示させているようです(サンプルギャラリーページのソースコードを読むと、一応やり方がわかります)。
とりあえず、自分が実際にやった、背景を淡くするのと、キャプションの表示だけ
背景を淡くする
以下の処理を追加します。HTMLファイルには一切コードの追加はありません。すばらしい。
#imagelightbox-overlay {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.9);
position: fixed;
z-index: 9998;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#imagelightbox-overlay {
-webkit-animation: fade-in 0.25s linear;
animation: fade-in 0.25s linear;
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
$( function()
{
var overlayOn = function()
{
$( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
}
var overlayOff = function()
{
$( '#imagelightbox-overlay' ).remove();
}
$( "a.attachimage" ).imageLightbox({
onLoadStart: function() { overlayOff(); },
onLoadEnd: function() { overlayOn(); },
onStart: function() { overlayOn(); },
onEnd: function() { overlayOff(); }
});
});
公式サイトのソースコードは省略してvar overlayOn = function(){}, overlayOff ... なんてかいてますが、別にどちらでもできることは同じです（というか、関数でもそんな表記ができるなんて知らなかった）。
キャプションを表示する
流れがわかってしまえばそんなにたいしたことはありません
#imagelightbox-caption {
text-align: center;
color: #fff;
background-color: #666;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0.625em;
}
#imagelightbox-caption {
-webkit-animation: fade-in 0.25s linear;
animation: fade-in 0.25s linear;
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
$( function()
{
var captionOn = function()
{
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).attr( 'title' ); // (1)
if( description.length > 0 ){
$( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
}
}
var captionOff = function()
{
$( '#imagelightbox-caption' ).remove();
}
$( "a.attachimage" ).imageLightbox({
onLoadStart: function() { captionOff(); },
onLoadEnd: function() { captionOn(); },
onStart: function() { /* do nothing */ },
onEnd: function() { captionOff(); }
});
});
こちらは公式サイトのものとちょっといじっていて、画像のaltではなくリンクのtitleを表示するように変えてます(コード中の// (1)の部分)。公式サイトの記事のようにid="imagelightbox"のimgタグを設置してしまうと、ここでタグの取得が上手くいかなくなるようなので注意してください。
他のエフェクトをつけるには？
とりあえず、公式サイトのソースコードを見ればわかります。そんなに難しいコードではないのでコピペで済ませられるはず。