とにかく軽いLightbox系スクリプト「Luminous」の使用方法

ブログなどで画像を拡大表示するライトボックス系のツールはたくさんあります。その中でもとにかく動作が軽い「Luminous」は超オススメです。この記事ではLuminousをブログやホームページなどに導入する手順をわかりやすく説明します。（このブログでもLuminousを使っているので自信アリです）

Luminousとは？

画像クリックで拡大画像をポップアップ表示するライトボックス系のJavaScriptです。ブログやホームページなどに簡単に導入することができます。

Luminousのコンセプトは「シンプル・軽量・jQueryなどに依存しない」だそうです。そういうのいいですね。好感持てます。

ソースファイルはGitHubに公開されていていて、誰でも使うことができます。

デモ

デモ画像をいくつか用意しました。軽快なLuminousの使い心地を試してみてください。（画像はぱくたそより）

↑画像がサクサク表示されて使い心地最高ですね！タテに長い画像（中段飛行機の写真）もディスプレイサイズに合わせて自動でフィットされます。

メリットと注意点

いきなり導入せずに、まずはLuminousが自分のサイトに合っているかどうか確認しましょう。

私が実際に使って感じたLuminousのメリットは以下の４つです。

メリット

• とにかく動作が早い
• ポップアップ時の演出がシンプル
• jQueryがいらない
• 導入が容易

反対に注意点は以下の２つです。

注意点

• プラグイン（WordPress）はありません
• class名を付ける必要がある

【一つ目】WordPressのプラグインではないので、導入するにはサイトのテンプレートファイルを編集する必要があります（数行書き加えるだけです）。

【二つ目】Luminousはaタグのcalss名を見て拡大処理の判断をしています。そのため拡大させたい画像へのaタグにはLuminous判定用にclass名（クラス名は任意）を付ける必要があります。画像へのaタグに手作業でclass名を追記するか、または自動で追記するスクリプトを用意するかのいずれかが必要となります。

「早いライトボックスがいい。」「シンプルなのがいい。」「少しならブログのテンプレートをいじれる」という方ならLuminousはベストチョイスだと思います。

そんな方は、迷わず導入手順↓へGo!です。

導入手順

Luminousをホームページやブログなどに導入する手順を説明します。

<link rel="stylesheet" href="cssへのパス/luminous-basic.min.css">

<script src="jsへのパス/Luminous.min.js"></script>
<script>new LuminousGallery(document.querySelectorAll('.zoom'));</script>

<a class="zoom" href="拡大画像のパス/picture_large.png">
  <img src="画像のパス/picture.png" alt="" />
</a>

これでLuminousの導入手順は完了です。クラス名を付けた画像がちゃんとポップアップするか確認してください。

必ずやるべきカスタマイズ

上記まででLuminousの導入は完了ですが、「これだけはした方がいい」というカスタマイズを紹介します。

スマホ用サイズ調整

デフォルトではスマホで画像をポップアップさせると画像が原寸大で表示されてしまいます（下図）。

↑スマホで表示したときの様子。表示サイズがでかすぎてなんのこっちゃ？です。これはLuminousのcssがディスプレイの横幅460px以下の時には画像を原寸表示する設定になっているためです。

このままだとスマホ閲覧時の使い勝手が悪いので、cssに以下を追記します。

css

@media screen and (max-width: 460px) {
  .lum-lightbox-inner img {
    max-width: 160vw !important;  /* 軽くスワイプで左端から右端まで動かせる量 */
    max-height: 85vh !important;  /* 上下に適度に余白 */
  }
}

↑これでスマホでも見やすい画像サイズになりました。

お好みのカスタマイズ

ここからのカスタマイズは、やってもやらなくてもどちらでもOKです。お好みでどうぞ。

画像送りの矢印を消す

デフォルトではポップアップ画像に次の画像への矢印「<」または「>」が表示されています。

写真をたくさん並べたギャラリー系サイトでは便利ですが、一般的なブログではあまり必要ないでしょう。この矢印を消すにはcssで矢印を非表示にするのが簡単です。cssに以下を追記します。

css

.lum-gallery-button {
  display: none !important;
}

これで矢印が消えます。

拡大可能だとわかるように表示する

拡大できる画像であることがぱっと見でわかるようにしておくと親切ですね。

その１例として、このブログでやっている虫めがねアイコンを付ける方法を紹介します。cssに以下を追記するだけです。

css

a.zoom{
  position: relative;
  display: block;
}
a.zoom::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: rgba(0,0,0,0.5);
  background-image: url("虫めがねアイコンファイルのURL");
  background-size: 1em 1em;
  background-position: center center;
  background-repeat: no-repeat;
}

クラス名（zoom）と虫めがねアイコンファイルのURLは適宜変更してください。

もしくは、画像にマウスを重ねたらマウスカーソルを虫めがねにするという手もあります。cssに以下を追記するだけです。

css

a.zoom{
  cursor: zoom-in;
}

これらはあくまで一例です。わかりやすくてカッコイイ見せ方ならどんな方法でもOKだとお思います。

まとめ

軽快なライトボックス系スクリプト「Luminous」の導入方法を説明しました。

一度でもLuminousを使ったらもう他のは使えませんね。Luminous最高です。