jQuery無しで拡大縮小や回転など色々できるjavascript画像ビューア・スライドギャラリー

Viewer.jsは、jQueryを必要とせずに動作するJavaScript製の画像ビューワー。複数の画像をポップアップギャラリーとして表示することができ、レスポンシブにも対応。スマートフォンやタブレットなどの様々なデバイスで動作します。

ポップアップした画像は、オプションボタンやマウスホイール、ピンチイン・ピンチアウト、キーボードによる操作で簡単に拡大・縮小・回転などが行なえます。

設定方法

GitHubの方でViewer.jsをダウンロードします。

「Code」＞「Download ZIP」でダウンロードすることができます。

distフォルダを任意の場所に配置します。（フォルダ名は変更しても構いません）

ダウンロードしたZIPファイルの中に色々入っていますが、使うのはdistフォルダの中にあるものだけです。

HTMLにViewer.jsを読み込むコードを入力します。

distフォルダの中に通常版と軽量版のがあるのですが、どちらを選んでも動作します。

<link href="./js/viewerjs/viewer.css" rel="stylesheet">
<script src="./js/viewerjs/viewer.js"></script>

HTMLにポップアップ表示したい画像をidで指定します。

ulやdivなどで囲むことで、その中にある画像に対しギャラリー表示することができます。(id名は構文エラーにならなければ何でも良いです)

<ul id="gallery">
   <li><img src="" alt=""></li>
   <li><img src="" alt=""></li>
   <li><img src="" alt=""></li>
</ul>

HTMLのbody閉じタグ前にjavascriptコードを入力します。

以下HTMLに直接コードを入力した場合のViewer.js呼び出しコード例です。

<script>
   const gallery = new Viewer(document.getElementById('gallery'));
</script>

オプションを使うことで様々な効果の変更を行うことができます。（詳しくはViewer.jsのGitHub参照）

デモ

Viewer.jsを使った画像ギャラリーのデモはこちら。

オプション

new Viewer(image, options)を使ってビューアーオプションを設定できます。グローバルデフォルトオプションを変更したい場合は、Viewer.setDefaults(options)を使用できます。

オプションについては、Viewer.jsサイトで各パラメーターの挙動が確認できたり、GitHubの方で解説されています。

以下は、GitHubの解説を僕が理解できるように日本語訳したものです。

backdrop

Type: Boolean or String
Default: true

モーダルのバックドロップを有効にし、staticを指定して、バックドロップをクリックしてもモーダルが閉じないようにします。

button

Type: Boolean
Default: true

ビューアーの右上にボタンを表示します。

navbar

Type: Boolean or Number
Default: true
Options:
- 0 or false: ナビゲーションバーを非表示にする
- 1 or true: ナビゲーションバーを表示する
- 2: 画面の幅が 768 ピクセルより大きい場合にのみナビゲーションバーを表示する
- 3: 画面幅が 992 ピクセルを超える場合にのみナビゲーションバーを表示する
- 4: 画面幅が 1200 ピクセルを超える場合にのみナビゲーションバーを表示する

ナビゲーションバーの表示/非表示を指定します。

title

Type: Boolean or Number or Function or Array
Default: true
Options:
- 0 or false: タイトルを非表示にする
- 1 or true or Function or Array: タイトルを表示する
- 2: 画面幅が 768 ピクセルより大きい場合にのみタイトルを表示する
- 3: 画面幅が 992 ピクセルより大きい場合にのみタイトルを表示する
- 4: 画面幅が 1200 ピクセルを超える場合にのみタイトルを表示する
- Function: タイトルの内容をカスタマイズする
- [Number, Function]: 最初の要素は可視性を示し、2 番目の要素はタイトルコンテンツをカスタマイズします

タイトルの表示/非表示と内容を指定します。

名前は、画像要素のalt属性またはそのURLから解析された画像名に由来します。

例えば、title: 4という表記は以下のように解釈されます。

new Viewer(image, {
  title: [4, (image, imageData) => `${image.alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`]
});

Type: Boolean or Number or Object
Default: true
Options:
- 0 or false: ツールバーを非表示。
- 1 or true: ツールバーを表示。
- 2: 画面幅が 768 ピクセルより大きい場合にのみツールバーを表示する。
- 3: 画面幅が 992 ピクセルより大きい場合にのみツールバーを表示する。
- 4: 画面幅が 1200 ピクセルを超える場合にのみツールバーを表示する。
- { key: Boolean | Number }: ツールバーを表示または非表示にします。
- { key: String }: ボタンのサイズをカスタマイズします。
- { key: Function }: ボタンのクリックハンドラーをカスタマイズします。
- { key: { show: Boolean | Number, size: String, click: Function }: ボタンの各プロパティをカスタマイズします。
- 利用可能な組み込みキー: "zoomIn"、"zoomOut"、"oneToOne"、"reset"、"prev"、"play"、"next"、"rotateLeft"、"rotateRight"、"flipHorizontal"、"flipVertical"。
- 利用可能な組み込みサイズ: "small", "medium" (default) and "large".

ツールバーの表示/非表示と、ボタンのレイアウトを指定します。

例えば、「toolbar: 4」という表記は以下のように解釈されます。

new Viewer(image, {
  toolbar: {
    zoomIn: 4,
    zoomOut: 4,
    oneToOne: 4,
    reset: 4,
    prev: 4,
    play: {
      show: 4,
      size: 'large',
    },
    next: 4,
    rotateLeft: 4,
    rotateRight: 4,
    flipHorizontal: 4,
    flipVertical: 4,
  },
});

詳しくは、custom toolbarを参照してください。

className

Type: String
Default: ''

ビューアーのルート要素に追加するカスタムクラス名

container

Type: Element or String
Default: 'body'
Document.querySelector の要素または有効なセレクター

ビューアーをモーダルモードで配置するコンテナー

inlineオプションが false に設定されている場合にのみ使用できます。

filter

Type: Function
Default: null

「表示する画像をフィルタリングする（画像を表示可能な場合はtrueを返し、画像を無視する場合はfalseを返す）。

例:

new Viewer(image, {
  filter(image) {
    return image.complete;
  },
});

src 属性が設定されていない画像はデフォルトで無視されることに注意してください

fullscreen

Type: Boolean or FullscreenOptions
Default: true

再生時にフルスクリーンを要求できるようにします。

ブラウザがFullscreen APIをサポートしている必要があります。

inheritedAttributes

Type: Array
Default: ['crossOrigin', 'decoding', 'isMap', 'loading', 'referrerPolicy', 'sizes', 'srcset', 'useMap']

元の画像から継承する追加の属性を定義します。

基本属性 src および alt は常に元の画像から継承されることに注意してください。

initialCoverage

Type: Number
Default: 0.9

表示される画像の初期カバレッジを定義します。0（0％）から1（100％）の間の正の数でなければなりません。

initialViewIndex

Type: Number
Default: 0

表示する画像の初期インデックスを定義します。

view メソッドのデフォルトパラメータ値としても使用されます。

inline

Type: Boolean
Default: false

インラインモードを有効にします。

interval

Type: Number
Default: 5000

再生中に自動的に画像をサイクルする間隔の時間を定義します。

keyboard

Type: Boolean
Default: true

キーボードサポートを有効にします。

focus

Type: Boolean
Default: true

初期化時にナビゲーションバーのアクティブアイテムにフォーカスします。

keyboard オプションを true に設定する必要があります。

loading

Type: Boolean
Default: true

画像を読み込む際にローディングスピナーを表示するかどうかを示します。

loop

Type: Boolean
Default: true

画像のループ再生を有効にするかどうかを示します。

現在の画像が最後の画像である場合、次に表示する画像は最初の画像であり、その逆も同様です。

minWidth

Type: Number
Default: 200

ビューアーの最小幅を定義します。

インラインモードでのみ利用可能です（オプションでinlineをtrueに設定します）。

minHeight

Type: Number
Default: 100

ビューアーの最小高さを定義します。

インラインモードでのみ使用できます（オプションでinlineをtrueに設定します）。

movable

Type: Boolean
Default: true

画像の移動を有効にします。

rotatable

Type: Boolean
Default: true

画像の回転を有効にします。

scalable

Type: Boolean
Default: true

画像のスケーリングを有効にします。

zoomable

Type: Boolean
Default: true

画像のズームを有効にします。

zoomOnTouch

Type: Boolean
Default: true

タッチスクリーン上でドラッグして、現在の画像をズームできます。

zoomOnWheel

Type: Boolean
Default: true

タッチスクリーン上でドラッグして、現在の画像をズームできます。

slideOnTouch

Type: Boolean
Default: true

タッチスクリーンでスワイプして、次または前の画像にスライドできるようにします。

toggleOnDblclick

Type: Boolean
Default: true

画像をダブルクリックしたときに画像サイズを自然なサイズと初期サイズの間で切り替えるかどうかを示します。

つまり、画像をダブルクリックすると、toggle メソッドが自動的に呼び出されます。

dblclick イベントのサポートが必要です。

Type: Boolean
Default: true

ズームインまたはズームアウト時に、ツールチップに画像の比率 (パーセント) を表示します。

transition

Type: Boolean
Default: true

いくつかの特別な要素に対して CSS3 トランジションを有効にします。

zIndex

Type: Number
Default: 2015

モーダルモードでビューアの CSS z-index 値を定義します。

zIndexInline

Type: Number
Default: 0

インラインモードでビューアの CSS z-index 値を定義します。

zoomRatio

Type: Number
Default: 0.1

マウスを動かして画像をズームするときの比率を定義します。

minZoomRatio

Type: Number
Default: 0.01

縮小時の画像の最小比率を定義します。

maxZoomRatio

Type: Number
Default: 100

ズームイン時の画像の最大比率を定義します。

url

Type: String or Function
Default: 'src'

表示する元の画像の URL を取得する場所を定義します。

文字列の場合は、各画像要素の属性の 1 つにする必要があります。関数の場合は、有効な画像 URL を返す必要があります。

例えば：

<img src="picture.jpg?size=160">

new Viewer(image, {
  url(image) {
    return image.src.replace('?size=160', '');
  },
});

ready

Type: Function
Default: null

ready イベントのショートカット。

show

Type: Function
Default: null

show イベントのショートカット。

shown

Type: Function
Default: null

shown イベントのショートカット。

hide

Type: Function
Default: null

Shortcut of the hide event.

hidden

Type: Function
Default: null

hide イベントのショートカット。

view

Type: Function
Default: null

view イベントのショートカット。

viewed

Type: Function
Default: null

viewed イベントのショートカット。

move

Type: Function
Default: null

move イベントのショートカット。

moved

Type: Function
Default: null

moved イベントのショートカット。

rotate

Type: Function
Default: null

rotate イベントのショートカット。

rotated

Type: Function
Default: null

rotated イベントのショートカット。

scale

Type: Function
Default: null

scale イベントのショートカット。

scaled

Type: Function
Default: null

scaled イベントのショートカット。

zoom

Type: Function
Default: null

zoom イベントのショートカット。

zoomed

Type: Function
Default: null

zoomed イベントのショートカット。

play

Type: Function
Default: null

play イベントのショートカット。

stop

Type: Function
Default: null

stop イベントのショートカット。