Web

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

更新日:

画像ギャラリーで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」を使用すると思います。

殿堂入り記事一覧

1
ベビー用品の購入はメルカリがお得!"中古はちょっと"と思っているあなた損してます!122

子どもが生まれる前は、やっぱり私も「初めての赤ちゃんだし中古はちょっと」と思って、ベビー用品は新品のものばかりを揃えていました。 でも、ベビーチェアを探しているときに一度メルカリを覗いて見たら、思って ...

2
本当におすすめしたい!買ってよかった便利グッズまとめ!843

元々、その場の勢いでモノを購入しないタイプの私が悩みに悩み、調べに調べた上で購入したものの中から、厳選して、今でも本当に買ってよかった!と思っている生活雑貨やガジェットを紹介したいと思います。 使い所 ...

3
絶対読むべき!私が読んで面白かったオススメ漫画を紹介します!373

ほんとに世の中にはたくさんの面白い漫画があります。 その中でも私が実際に読んでみて面白かったと思った漫画をさらっとまとめていきます。 もくじ1 面白い漫画一覧1.1 かくかくしかじか1.2 動物のお医 ...

4
マザーズバッグはリュック型?トート型?どちらを買うべき?997

出産を前にマザーズバッグを探そうと思った時にトートにしたらいいか、リュックにしたらいいか悩みますよね。 正直にいうと、トートもリュックも用意して、かつトートが斜め掛けできるものだったら、ほぼどんなお出 ...

5
【保存版】出産準備用品リスト!安心して赤ちゃんを迎えるために!769

安定期に入った頃から準備を始めてベビー用品。 ただ、初めての出産で「何を買ったらいいのかさっぱりわからない」というママ・パパも多いのではないでしょうか。 そんなママ・パパのためにわかりやすい「出産準備 ...

6
本格的な水中撮影にはアクションカメラ「GoPro」が絶対オススメ!4,844

最近はスキューバーダイビングやシュノーケルの水中撮影でGoProを使用している方も多くなってきています。 以前は水中撮影をしようと思うと大型で高価な撮影機材を使用しなければいけませんでしたが、GoPr ...

7
山ガールにもおすすめ!富士登山グッズのレンタルショップ5選403

富士登山やトレッキングに行きたいと思っても装備のことで頭を抱えてしまいますよね。 勢い込んで装備を購入しても、「次も行きたい」となるか「もうこりごり」となるかは人しだいなところもありますし、かといって ...

-Web
-

Copyright© カリルノ , 2017 AllRights Reserved.