Blog

スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」

2015.05.19Cat:javascript デザイナー

今回はjavascriptのプラグイン「PhotoSwipe」を紹介します。
こちらはjQueryに依存しません。

久しぶりにjavascriptのプラグインなので、htmlを自分で書かないといけなかったり、
いつもより設定がややこしかったです。

こちらの特徴は、スマホでの写真の操作がSNSや通常の写真アプリのように出来るという点です。

具体的には、
・2本指の操作で写真のピンチ、ズームができる
・横にスワイプで前後の写真に遷移する
・縦にスワイプするとギャラリーを閉じる
・PCでは、ズームボタン、SNSシェア、フルスクリーンの機能がある

が他のプラグインとの違いかと思います。

キャプションをつけることも出来ます。

デモを作成していますので、ご覧ください。
スマホで見るのをオススメします!

DEMO

PhotoSwipeの使い方

まずはファイルをダウンロードします。

dimsemenov/PhotoSwipe · GitHub

ちなみに、プラグインのサイトは以下になります。

PhotoSwipe: Responsive JavaScript Image Gallery

ダウンロードしたファイルを解凍すると、「dist」というフォルダがあり、基本的にはその中のファイルを使用します。

次に、htmlで関係ファイルを読み込みます。

そして、
javascriptを記述します。

こちらは、別ファイルでも、の直前でもいいと思います。

さらに、
プラグイン用のフレームというか、外側の部分のHTMLを記述します。
の直前、自分のhtmlの邪魔にならないような位置に記述してください。

そして、やっと、
ギャラリー部分のhtmlです。

ルールとしては、divのclassは、上述したjavascriptの「.my-gallery」部分と同じ必要があります。
そして、画像部分は、figureタグで囲み、aにdata-sizeを記述します。

これで完成です!

オプションも用意されています!

PhotoSwipe Options

ちなみに、ブラウザ・スマホ対応は、
PCだと、Chrome, Firefox, Safari, Opera, IE8以上
Android 2.3.7+ (2.1はテストしていない): デフォルトのbrowser, Chrome, Firefox (最新), Dolphin (最新)
iOS 5+
Windows Phone 7+: デフォルトのbrowser (タッチジェスチャーは8から)
BlackBerry OS 10+: デフォルトのbrowser (古いバージョンはテストしていない)

になります。

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ