[Viewer.js]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参照）

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

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