【Viewer.js使い方】ズーム・スライドも簡単！JavaScriptで高機能フォトギャラリーを実装する方法

Viewer.jsとは？画像ギャラリーに最適なJavaScriptライブラリ

Viewer.jsは、ウェブブラウザ上で画像やドキュメントを簡単に表示・閲覧できるJavaScriptライブラリです。
主に画像ビューアとして使われ、複数の画像を拡大・縮小したり、スライドショーのように切り替えたりできます。
導入もシンプルで、HTMLに組み込むだけで利用できるため、プログラミング初心者でも扱いやすいのが特徴です。

また、CDNからの読み込みによって数行のコードで導入が可能で、カスタマイズも柔軟。スマートフォンやタブレットへのレスポンシブ対応もされているため、PC・モバイル問わずユーザーに快適な閲覧体験を提供できます。
Webサイト制作において、画像の見せ方ひとつで印象は大きく変わります。Viewer.jsは、その「見せ方」を、技術的ハードルを下げながらリッチに演出してくれる強力なツールです。

Viewer.jsの主な特徴とメリット

Viewer.jsの魅力は、シンプルであるにも関わらず非常に多機能な点にあります。以下のような特徴を持っています。

• ズームイン／ズームアウトマウスホイールやタッチ操作で直感的に拡大縮小
• スライド表示複数の画像を順番にスライドで表示
• 回転・反転画像の向きを変更するUI操作が可能
• 全画面モード画像をフルスクリーンで表示できる
• レスポンシブ対応スマホやタブレットでも快適に動作
• カスタマイズ性各種イベントフックやオプション設定で柔軟に機能を調整可能

Viewer.jsの実践デモ｜フォトギャラリーを実際に動かしてみる

このように、Viewer.jsはただの「画像拡大ツール」ではなく、本格的なフォトビューア・ギャラリーとしての機能を網羅しています。軽量かつスムーズに動作する点も、ユーザー体験向上に直結します。

Viewer.jsの導入方法と基本的な使い方

Viewer.jsの導入はとても簡単です。今回は特に初心者にも優しいCDNを利用した導入方法をご紹介します。
基本的なHTML構造の中にViewer.jsのスクリプトとスタイルを読み込み、対象の画像や画像群にJavaScriptで初期化を行うだけです。

実装例：ポップアップのフォトギャラリーを実装

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.5/viewer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.5/viewer.min.js"></script>

<div id="images">
    <img src="https://placehold.jp/150x150.png" alt="画像1">
    <img src="https://placehold.jp/150x150.png" alt="画像2">
    <img src="https://placehold.jp/150x150.png" alt="画像3">
</div>

JavaScript

document.addEventListener('DOMContentLoaded', () => {

    const viewerElm = document.getElementById('images');
    const viewer = new Viewer(viewerElm, {
        navbar: true,
        title: true,
        rotatable: true ,
        toolbar: {
            zoomIn: true,
            zoomOut: true,
            oneToOne: true,
            reset: true,
            prev: true,
            next: true,
            play: {
                show: true,
                size: 'large',
            },
            rotateLeft: true,
            rotateRight: true,
            flipHorizontal: true,
            flipVertical: true
        }
    });

});

わずか数行でズームやスライドなどの機能が追加されるので、導入にかかる時間はほんの数分程度。
しかも、既存の画像にクラスやdata属性、idを追加するだけで機能を適用できるため、既存サイトのリファクタリングにも最適です。
JavaScript初心者の方でも扱いやすく、複雑なフレームワークに頼らずに直感的なインタラクションが実現できるという点で、Viewer.jsは非常に優れた選択肢です。

npmでのインストールも可能です。

Viewer.jsの便利オプション

Viewer.jsは初期状態でも十分に高機能ですが、**オプション設定を活用することで、自分好みの動作に調整することが可能**です。たとえば、次のような設定があります。

inline（Boolean）

モーダルではなく、ページ内に埋め込んで表示します。

button（Boolean）

閉じるボタン（×）を表示するかどうか。

navbar（Boolean）

サムネイルのナビゲーションバーを下部に表示します。

title（Boolean）

画像のタイトルを上部に表示するか。

toolbar（Boolean または Object）

操作ツールバー（ズーム、回転など）を表示します。詳細なカスタマイズも可能です。

tooltip（Boolean）

ボタンにマウスを乗せたときにツールチップを表示。

movable（Boolean）

ドラッグで画像を動かせるかどうか。

zoomable（Boolean）

ズーム操作（拡大・縮小）が可能か。

rotatable（Boolean）

回転操作が可能か。

scalable（Boolean）

拡大・縮小のスケーリング操作が可能か。

transition（Boolean）

表示時にフェードなどのCSSトランジションを有効にする。

fullscreen（Boolean）

フルスクリーン表示を有効にするか。

keyboard（Boolean）

キーボード操作（左右キーで移動など）を有効にするか。

backdrop（Boolean または String）

モーダルの背景オーバーレイを表示するか（または 'static' を指定して固定にする）。

loading（Boolean）

画像読み込み中のローディング表示を有効にするか。

loop（Boolean）

最後の画像の次に最初の画像を表示（ループ）するか。

slideOnTouch（Boolean）

モバイルでスワイプによる画像切り替えを有効にするか。

toggleOnDblclick（Boolean）

ダブルクリックでズームを切り替えるか。

zoomOnTouch（Boolean）

モバイルでピンチによるズーム操作を有効にするか。

zoomOnWheel（Boolean）

マウスホイールでのズーム操作を有効にするか。

minZoomRatio（Number）

ズームの最小倍率（例：0.1）。

maxZoomRatio（Number）

ズームの最大倍率（例：10）。

zIndex（Number）

モーダルビューアーのz-index（重なり順）。

zIndexInline（Number）

インライン表示時のz-index。

zoomRatio（Number）

マウスホイール・ボタン操作時のズーム倍率（例：0.1）。

viewMode（Number）

ビューモード（画像の表示範囲や拡大縮小の挙動）を設定（0〜3）。

initialViewIndex（Number）

最初に表示する画像のインデックス番号。

interval（Number）

スライドショーの間隔（ミリ秒単位）。

ready（Function）

初期化完了時に呼び出される関数。

show（Function）

表示前に呼び出される関数。

shown（Function）

表示後に呼び出される関数。

hide（Function）

非表示前に呼び出される関数。

hidden（Function）

非表示後に呼び出される関数。

view（Function）

画像表示前に呼び出される関数。

viewed（Function）

画像表示後に呼び出される関数。

これらのオプションはすべて、Viewerインスタンスを生成する際にオブジェクト形式で指定できます。
例えば、ビジネス用途のWebページでは「UIを極限までシンプルにしたい」、ギャラリー中心のポートフォリオサイトでは「すべての機能を活かしたい」など、用途やデザインの意図に合わせて自由に調整できる点が魅力です。

モバイル対応もばっちり！レスポンシブビューアの設計ポイント

現在のWeb制作では、PCだけでなくスマートフォンやタブレットでの見栄えや操作性も非常に重要です。
Viewer.jsはもともとモバイルフレンドリーに設計されており、タッチジェスチャーによるズーム・スライド・回転操作にも対応しています。

しかし、レスポンシブ設計において注意すべきは「画像のサイズと読み込み」です。
あらかじめ画像の表示サイズをCSSで調整したり、WebPなどの軽量フォーマットを併用することで、パフォーマンスを維持しながらリッチな表示を実現できます。

また、スマホでの表示時にはUIのサイズやアイコンの押しやすさにも配慮しましょう。
Viewer.jsのデフォルトUIはモバイルにも適していますが、必要に応じてCSSで上書きすることでさらに最適化が可能です。

実装時に気をつけたいポイントと活用のコツ

Viewer.jsを利用する際に注意したい点は、「画像の読み込み状態」と「DOM操作のタイミング」です。
画像が完全に読み込まれる前にViewerを初期化すると、うまく動作しない場合があります。
そのため、DOMContentLoadedイベントや画像のloadイベントを活用して、初期化のタイミングを適切に管理することが重要です。

また、動的に画像を追加するSPA（シングルページアプリケーション）やCMSと連携する場合は、再初期化やイベントバインドの工夫が必要です。
Viewer.jsはイベントフックも充実しているので、ライフサイクルに合わせた柔軟な実装が可能です。

さらに、画像にalt属性やtitle属性をしっかり設定することで、SEO対策としても効果的。
見た目だけでなく、アクセシビリティや検索エンジン対策まで考慮した実装を心がけましょう。

この記事に関連するよくあるご質問

まとめ

いかでしたでしょうか？
今回の記事では、軽量で高機能なJavaScriptライブラリ「Viewer.js」を使って、ズーム・スライド機能つきのフォトギャラリーを簡単に実装する方法を解説しました。

今回のポイントをまとめますと、次のとおりです。

他にもJavaScriptライブラリやWeb制作に役立つ実用テクニックに関する技術や実用テクニックを随時発信しています。
「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします！

最後までお読みいただきありがとうございました！