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

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

Luminousとは?

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

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

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

デモ

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

カメラを持つ女性

東京の夜景

ブルーインパルス

モノクロの大型船

海を泳ぐカメ

元気が出るひまわり

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

メリットと注意点

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

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

メリット

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

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

注意点

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

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

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


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

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

導入手順

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

Luminousを入手

まずはLuminousを入手します。

GitHubの「Luminousのページ」へ行き、グリーンの「Clone or download」ボタンからZIPファイルをダウンロード。

GitHubのLuminousページからダウンロード

↑「luminous-master.zip」というファイルがダウンロードされます。

cssとjsを取り出す

ダウンロードしたZIPファイルから使用するcssとjsを取り出します。

ZIPファイルを解凍し「dist」フォルダ内にある「Luminous.min.js」と「luminous-basic.min.css」をデスクトップ等へコピーしてください。

luminousで使用するjsとcss

↑他にもたくさんファイルがありますが、使用するのはこの2ファイルだけです。

サーバーにアップ

jsとcssをサーバーにアップします。

先ほど取り出した「Luminous.min.js」と「luminous-basic.min.css」をお使いのサーバーに保存してください。保存場所はどこでも構いませんが、サイトのテンプレートフォルダの近くなど、管理しやすい場所が良いと思います。

cssを読み込む

ここからはサイトのテンプレートファイル(html)を編集します。

まずはheadでcssを読み込みます。headタグ内(<head>から</head>の間)に下記1行を追記してください。

テンプレートhtml

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

cssへのパス」の箇所はcssを保存した場所に合わせて変更してください。

スクリプトを読み込む

引き続きサイトのテンプレートファイル(html)の編集です。

ページの最後でスクリプトを読み込みます。bodyの閉じタグ(</body>)の直前に下記2行を追記してください。

テンプレートhtml

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

jsへのパス」の箇所はjsを保存した場所に合わせて変更してください。
また、.zoomはポップアップさせる画像のaタグに付けるclass名です。任意のclass名を指定できます。(ここではzoomというclass名にしています)

注意点

  • 1行目は、body閉じタグ直前でなく任意の場所に記載してもOKです。
  • 1行目と2行目はこの記載順どおりにしないと動作しません。
  • 2行目は</body>の直前に記載してください。ページの情報が読込まれる前にこのスクリプトが走っても対象画像なしとなって動作しません。
  • 2行目のnew LuminousGallery(document.querySelectorAll(の箇所をnew Luminous(document.querySelector(と説明しているサイトもありますが、それだとページ内の1枚目の画像しかポップアップしません。

画像へのaタグにクラス名を付ける

ここからは、サイトの各ページのhtmlの編集を行います。

画像へのaタグに手順5で決めたclass名を付けてください(下は記載例)。

各ページのhtml

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

Luminousは画像へのaタグを見て拡大処理をするか判断します。上記例では判定用にzoomというクラスを付けています。

これで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;  /* 上下に適度に余白 */
  }
}

スマホ表示(調整後1)

スマホ表示(調整後2)

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

お好みのカスタマイズ

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

画像送りの矢印を消す

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

矢印付きの画像

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

css

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

これで矢印が消えます。

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

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

ルーペ

その1例として、このブログでやっている虫めがねアイコンを付ける方法を紹介します。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最高です。

コメント

記事No.1083

コメントをどうぞ