上間ウェブ店

【脱jQuery】シンプルなlightbox系スクリプト”Luminous”をwebpackで使う方法。ギャラリーも。

2019/06/18

こんにちは。上間ウェブ店の上間です。

今回は最近よく使うlightbox系のスクリプト、”Luminous”をwebpackで使う方法の紹介です。

シンプルでサクッと実装できます。

imgix/luminous

A simple, lightweight, no-dependencies JavaScript lightbox. – imgix/luminous

インストール

まずはnpmでとってきます。devDependenciesではなくdependenciesに入れましょう。

yarn add luminous-lightbox

読み込み

webpackを使用している前提です。luminous用のjsファイルを作成し、頭の方でスクリプトとcssを読み込みます。

// lumiunous.js

import { Luminous, LuminousGallery } from 'luminous-lightbox'
import 'luminous-lightbox/dist/luminous-basic.css'

このコードでは、LuminousとLuminousGalleryを2つ読み込んでますが、どちらかしか使わない場合は1つで大丈夫です。

下記で単体とギャラリーの使い方ではそれぞれ書き方を変えてるので参考にしてください。

単体（ギャラリー無し）で使う方法

ギャラリーにすると矢印が出現してコントロールが可能になります。

<a class="luminous" href="http://placehold.jp/300x150.png">
  <img src="http://placehold.jp/150x50.png">
</a>
// luminous.js

import { Luminous } from 'luminous-lightbox'
import 'luminous-lightbox/dist/luminous-basic.css'

const trigger = document.querySelector('.luminous')
const luminous = () => {
  new Luminous(trigger)
}
export default luminous

// index.js

import luminous from './luminous.js'

luminous()

これだけです。めちゃくちゃシンプルですね。

ただこれだと1枚しか使えないんです。複数枚を単体で使おうとすると最初の1枚しか効かないんですね。

複数枚を単体で使う場合は下記です。これで、.luminousクラス内の画像は1枚ずつlightboxします。ギャラリー無しです。

<a class="luminous" href="http://placehold.jp/300x150.png">
  <img src="http://placehold.jp/150x50.png">
</a>
<a class="luminous" href="http://placehold.jp/400x150.png">
  <img src="http://placehold.jp/150x50.png">
</a>
<a class="luminous" href="http://placehold.jp/500x150.png">
  <img src="http://placehold.jp/150x50.png">
</a>
// luminous.js

import { Luminous } from 'luminous-lightbox'
import 'luminous-lightbox/dist/luminous-basic.css'

const trigger = document.querySelectorAll('.luminous')

const luminous = () => {
  Array.from(trigger).forEach((e) => {
    new Luminous(e)
  })
}
export default luminous

ギャラリーで使う方法

<a class="luminous" href="http://placehold.jp/300x150.png">
  <img src="http://placehold.jp/150x50.png">
</a>
<a class="luminous" href="http://placehold.jp/400x150.png">
  <img src="http://placehold.jp/150x50.png">
</a>
<a class="luminous" href="http://placehold.jp/500x150.png">
  <img src="http://placehold.jp/150x50.png">
</a>
import { LuminousGallery } from 'luminous-lightbox'
import 'luminous-lightbox/dist/luminous-basic.css'

const trigger = document.querySelectorAll('.luminous')

const luminous = () => {
  new LuminousGallery(trigger)
}

export default luminous

これも単純ですね。querySelector を querySelectorAll に、 new Luminous を new LuminousGallery とするだけです。

注意点

レスポンシブ対応が中途半端なんですよね。。

スマホ時に画面より画像が大きいとはみ出します。

あと、z-indexが書かれてなくて、閉じるボタンが隠れがち。

なので僕はいつもこれを追加しています。

// luminous.styl

.lum-lightbox
  z-index 999

.lum-lightbox-position-helper
  img
    width 100%
    height 100%
    object-fit contain
    font-family 'object-fit: contain;'

object-fit ですね。こいつの登場でコーディングがすごく楽になりました。今度記事にしたいと思います。

オプションなど

githubに載ってますが英語なので、訳してくれているサイトを紹介します。

lightboxの超軽量版！jQuery不要の画像拡大スクリプト「Luminous」の基本的な使い方とオプションの説明、複数画像への適用方法
https://wemo.tech/1169

僕の説明より詳しく量も豊富なので、そっちみた方がわかりやすいかもしれませんね笑

以上です。