カリルノ

ピッと気になるコトとモノをご紹介「カリルノ」

Web

PhotoSwipeの設置方法!レスポンシブ対応Lightbox系の決定版!

投稿日:2016-06-13 更新日:

画像ギャラリーでLightboxを使用しているけど、スマートフォンなどのタブレットで見るといまいちと思っている方も
多いと思います。

私もLightboxやLightbox Plusなど色々と使ってきましたが、スマートフォンなどのタブレットが台頭してきて、どうも表示の仕方が気に食わないと思っていました。

そこで今回はレスポンス部対応のLightbox系の決定版!「PhotoSwipe」をご紹介します。

PhotoSwipeのサンプル

PhotoSwipe

まずはどういうものかを見てみないことには、自分のサイトに実装したいようなものかがわかりませんよね。

動作デモはPhotoSwipeの公式サイトでご覧頂けます。

サイト PhotoSwipe公式サイト

いかがですか?

パソコンのブラウザでもスワイプができますが、ぜひスマートフォンでも見ていただきたいです。

私が決定版と言っている意味をわかって頂けると思います。

PhotoSwipeの実装方法

ファイルをダウンロード

まずはファイルをダウンロードしてきましょう。

ファイルはGitHubにあります。

サイト GitHub - dimsemenov/PhotoSwipe:

「ckone of download」ボタンをクリックして「Download ZIP」からダウンロードできます。

使用するファイルを確認

「PhotoSwipe-master.zip」を解凍すると、いくつかファイルがありますが、基本的には「dist」内のファイルを使用します。

自サイトの適当なところにデータ放り込んでください。

私の設置場所はこんな感じです。

/js/PhotoSwipe-master/dist/

ファイルの読み込み

ファイルを読み込むように設定を行います。
<head>内に設置してください。
※JavaScript(追加外部ファイル)部分はあとで解説します。

セット用のjavascript

セット用のjavascriptを追加します。

photoswipe-ui-default.min.jsを読み込んだ後に直接<script></script>で囲んで記述してもいいですが、長いので、私は外部ファイル(ひとつ前の項目の「追加外部ファイル」)として読み込みました。

名前は適当でいいのですが、今回はphotoswipe-sub.jsとして下記のコードを記載し、読み込んでいます。

PhotoSwipe表示用のHTML

PhotoSwipe動作表示用のHTMLパーツを追加します。
自分のhtmlファイルの邪魔にならない部分に追加してください。
私はギャラリー画像(小さい画像を並べている部分)を表示しているHTMLの下に追加しました。

ギャラリー画像部分のHTML

やっとですが、ギャラリー部分(サムネイル部分)の表示HTMLです。

まとめ

PhotoSwipeを使用したギャラリーはいかがでしょうか。

もっといいものが現れるまでは、当分「PhotoSwipe」を使用すると思います。

-Web
-

関連記事

Copyright© カリルノ , 2017 All Rights Reserved.