PC＆スマホサイトのレスポンシブ対応、ギャラリー系ライブラリで人気のPhotoSwipeを簡単に導入できるようにjQuery版にカスタマイズしました。
Light Boxを導入したことがあれば、導入方法はだいたい同じです。
jQuery PhotoSwipe V1.0.1
まずは DEMO
そして実際に導入したイメージ デザインサンプル
DEMO Download
先ほどのサンプル Download
機能は
・画像のグループ化（titleに英字でお好きなグループ名を入れてください）
・画像の拡大と縮小
・モーダルに枚数表示
・モーダルにコメントやタイトルの表示（位置やサイズはcssでカスタマイズできます）
・モーダル表示の際にウィンドウ幅が変更されると自動で拡大縮小
・PCでは画像をドラッグしながらスライド可能
・モバイルではスワイプで左右にスライド可能
DEMOとデザインサンプルはレスポンシブにしていますが
必要に応じて変更してください。
導入方法
jQueryライブラリとCSSの読み込み(head内に記述)
1 2 3 4 5 6 | <!-- CSSの読み込み --><link rel="stylesheet" href="js/photoswipe/photoswipe.css" /><!-- JavaScriptの読み込み --><script src="js/jquery-1.10.2.min.js"></script><script src="js/photoswipe/jquery.photoswipe.js"></script> |
jQuery PhotoSwipeの呼び出し(同じくhead内に記述)
1 2 3 4 5 6 7 8 | <!-- JavaScriptをhead内に記述 --><script>;(function($){ $(function(){ $('a.swipe').photoSwipe(); });})(jQuery);</script> |
htmlのマークアップ(body内に記述)
1 2 3 4 | <!-- htmlを記述（任意のグループ名を指定） --><a href="img/img_01.jpg" class="swipe" rel="group1" title="モーダル時のコメントはここに"><img src="img/img_01.jpg" alt="" /></a><a href="img/img_02.jpg" class="swipe" rel="group1" title="モーダル時のコメントはここに"><img src="img/img_01.jpg" alt="" /></a><a href="img/img_03.jpg" class="swipe" rel="group1" title="モーダル時のコメントはここに"><img src="img/img_01.jpg" alt="" /></a> |
気に入ってもらえたら、シェアしてもらえると嬉しいです！