はじめに

「画像クリックで拡大」を簡単に実現できる 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'))
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  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 でインストールした場合は require や import(使える環境なら) を利用。

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'));

ギャラリー形式

LuminousGallery と querySelectorAll などを使う。
※試してない

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'))

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list