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 > |
気に入ってもらえたら、シェアしてもらえると嬉しいです!