みなさん、こんにちは。
MEGIDO(メギド)です。
最近はワードプレスを利用した自分が携わったWEBサイト制作で
「写真ギャラリーを表示させた時にスマートフォンではスワイプ対応させてほしい」という依頼がありました。
このような写真ギャラリーを1番簡単に実装するには
「LightBox」が楽なのでよく利用していますが、
「LightBox」はスワイプ対応していません。
そこで代わりになるライブラリがないかなと探したところ
「スワイプ対応・軽量で動作が軽い・実装が簡単」なライブラリを見つけました。
そのライブラリが「Spotlight」というライブラリです。
しかも「Spotlight」はjQuery依存のライブラリではないのもポイントが高い。
今回はオススメプラグインである「Spotlight」の実装を方法を紹介します。
「Spotlight」のデモ
「Spotlight」で写真ギャラリーを実装する方法を紹介する前に
どんな感じで表示されるのか気になる人もいるかと思います。
下記に公式のデモページのリンクを貼っておくので興味のある方は確認してみてください。
デモページを確認して頂いた方は分かると思いますが、
スワイプ対応しているし、動作も軽い感じで不快な感じにならないのが良いですね。
「Spotlight」の使い方
「Spotlight」で写真ギャラリーを実装をするのはとても簡単です。
①JavaScriptファイルを読み込む
②ギャラリー表示したい要素に指定のクラス名を追加する
この２つだけで写真ギャラリーが実装できてしまいます。
まずは公式ページから必要なファイルをダウンロードをしましょう。
zipファイルをダウンロードして、その中の「spotlight.bundle.js」を
任意のフォルダに設置してそのJavaScriptファイルをヘッダーまたはフッターで
読み込ませるようにしてください。
それが完了したらギャラリー表示したい要素に「spotlight」をクラス名として追加しましょう。
|
1 2 3 4 5 6 7 8 9 |
<a class="spotlight" href="gallery_img1.jpg"> <img src="gallery_thumb1.jpg"> </a> <a class="spotlight" href="gallery_img2.jpg"> <img src="gallery_thumb2.jpg"> </a> <a class="spotlight" href="gallery_img3.jpg"> <img src="gallery_thumb3.jpg"> </a> |
画像の名前は適当ですが、上記のようにクラス名を追加すれば
写真ギャラリーが完成してしまいます。
非常に便利！
まとめ
今回は「スワイプ対応・軽量で動作が軽い・実装が簡単」な
写真ギャラリー作成プラグインの「LightBox」について紹介しました。
今回は写真ギャラリーを実装する方法しか紹介していませんが、
オプションを利用することでカスタマイズすることも可能です。
カスタマイズについては公式ページを確認してみてください。
それでは今回はここまで。
最後までお読みいただきありがとうございました。
まとめ
SHARE
