Viewer.jsで簡単にフォトギャラリーを実装する

2018.07.25　Posted by Coding_team

Webプログラミング

tecmemo1807

こんにちは、ウェブラボクリエイターズメモです。

普段ネットで買い物をしてるとき、商品のフォトギャラリーをクリックして切り替えるのが一般的かと思います。

しかし、いちいちクリック操作するのは面倒だと思いませんか？

もしスライダーやフォトギャラリーをキーボードで操作できたら非常に楽になると思います。

今回はキーボードで画像を切り替えることができるスクリプト「Viewer.js」をご紹介します。

Viewer.jsを使用した簡単なDEMOを作成しましたので、まずは下記からご覧ください。

→DEMOはこちら

では実際にDEMOと同じようにViewer.jsを実装していきます。

始めに下記からViewer.jsをダウンロードします。

→GitHub

使用するファイルは「dist」内の
・viewer.min.css
・viewer.min.js
の2ファイルになります。

次にviewer.min.cssとviewer.min.jsを読み込ませます。

■HTML head内

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

1 2	<link href="viewer.min.css" rel="stylesheet"> <script src="js/viewer.min.js"></script>

次にbody内に以下の様に記述をします。

■HTML body内

    <ul id="images">
        <li><img src="images/sample01.jpg"></li>
        <li><img src="images/sample02.jpg"></li>
        <li><img src="images/sample03.png"></li>
        <li><img src="images/sample04.jpg"></li>
        <li><img src="images/sample05.jpg"></li>
        <li><img src="images/sample06.jpg"></li>
        <li><img src="images/sample07.jpg"></li>
        <li><img src="images/sample08.jpg"></li>
        <li><img src="images/sample09.jpg"></li>
        <li><img src="images/sample10.jpg"></li>
    </ul>
    <script>
        var viewer = new Viewer(document.getElementById('images')); //任意でid名を指定
    </script>