はじめに

「画像クリックで拡大」を簡単に実現できる imgix/luminous を触る機会があったので、簡単に使い方を整理した。

デモページ を見ると、何ができるのかがすぐわかる。

TL;DR

  • npm i luminous-lightbox でインストール
    • CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script>
  • <a href="拡大画像"><img src="サムネイル"></a> に対して以下を実行
    • new Luminous(document.querySelector('a'))
  • ギャラリー表示の場合は LuminousGallery を使用
    • new LuminousGallery(document.querySelectorAll('a'))

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. 使い方
      1. 基本形(1枚 単位)
      2. ギャラリー形式
      3. オプション設定
  5. まとめ
  6. 参考文献

環境・条件

  • Google Chrome バージョン: 78.0.3904.108(Official Build)(64 ビット)
  • luminous v2.3.2

詳細

使い方はシンプルなので、公式リポジトリだけ見ておけば良いと思う。

セットアップ

npm でインストール

1
$ npm i luminous-lightbox

CDN は下記。

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script>

使い方

基本形(1枚 単位)

npm でインストールした場合は requireimport(使える環境なら) を利用。

1
const Luminous = require('luminous-lightbox');

以下のような HTML を用意して、new Luminous(<element>) を実行。

1
2
3
<a href="拡大表示したい画像">
<img src="サムネイル">
</a>
1
new Luminous(document.querySelector('a'));

これで、画像をクリックすると拡大表示され、もう一度クリックで拡大画像が閉じられる。

実際には id なり、class なりを設定した上で使うことになるはず。

1
2
3
4
<!-- class 名は適当 -->
<a class="luminous-target" href="拡大表示したい画像">
<img src="サムネイル">
</a>
1
new Luminous(document.querySelector('a.luminous-target'));

ギャラリー形式

LuminousGalleryquerySelectorAll などを使う。
※試してない

1
new LuminousGallery(document.querySelectorAll("a.luminous-target"));

オプション設定

new の際にオプションを設定可能。詳細は Options / Defaults を参照。

1
2
3
4
5
6
7
8
const options = {
openTrigger: 'click',
closeTrigger: 'click',
};
new Luminous(
document.querySelector('a'),
options
)

まとめ

  • npm i luminous-lightbox でインストール
    • CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script>
  • <a href="拡大画像"><img src="サムネイル"></a> に対して以下を実行
    • new Luminous(document.querySelector('a'))
  • ギャラリー表示の場合は LuminousGallery を使用
    • new LuminousGallery(document.querySelectorAll('a'))

参考文献

関連記事