レスポンシブ対応のPhotoSwipeをLightboxのように簡単設置できるjQueryに

PC＆スマホサイトのレスポンシブ対応、ギャラリー系ライブラリで人気のPhotoSwipeを簡単に導入できるようにjQuery版にカスタマイズしました。
Light Boxを導入したことがあれば、導入方法はだいたい同じです。



jQuery PhotoSwipe V1.0.1

まずは　DEMO
そして実際に導入したイメージ　デザインサンプル

DEMO Download
先ほどのサンプル Download

機能は
・画像のグループ化（titleに英字でお好きなグループ名を入れてください）
・画像の拡大と縮小
・モーダルに枚数表示
・モーダルにコメントやタイトルの表示（位置やサイズはcssでカスタマイズできます）
・モーダル表示の際にウィンドウ幅が変更されると自動で拡大縮小
・PCでは画像をドラッグしながらスライド可能
・モバイルではスワイプで左右にスライド可能


DEMOとデザインサンプルはレスポンシブにしていますが
必要に応じて変更してください。




導入方法
jQueryライブラリとCSSの読み込み(head内に記述)

<!-- 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内に記述)

<!-- JavaScriptをhead内に記述 -->
<script>
;(function($){
	$(function(){
		$('a.swipe').photoSwipe();
	});
})(jQuery);
</script>

htmlのマークアップ(body内に記述)

<!-- 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>

気に入ってもらえたら、シェアしてもらえると嬉しいです！