東京都新宿区のWeb制作会社 ウェブラボ株式会社

スタッフブログ

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

2018.07.25 Posted by

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内

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

■HTML body内

スライドショーなどを設定したい場所に先ほど指定したid名を記述します。

下記はGitHubにも記載してあるViewer.jsのDEMOページになっています。使用できるオプションなど沢山のアクションを試せるので参考にしてみてください。

→詳しくはこちら

今回紹介したViewer.jsですが、よく見るスライダーだけでなくフォトギャラリーなんかでも使えるので汎用性は高いのではないかと感じました。

オプションを使うことでDEMOページで見たもの以外にも沢山のアクションを実装することができ、実用性も充分です。

フォトギャラリーのような画像が沢山あるページでも楽に画像の切り替えができるので便利ですね!

以上、クリエイターズメモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278