より高度なPhotoSwipeの使い方
デフォルトでは、1画面に3つまでサムネイル画像を並べて表示になる
でも、画像一覧には全然足りない
そんなときには
PhotoSwipeの
jquery-mobile.css
を編集する
デフォルトでは、
$.gallery li{float:left; width:33.33333%;}
$.gallery.li a{display:block; margin:5px; border:1px solid #3c3c3c}
これを
$.gallery li{float:left; width:20%;}
$.gallery li a{display:block; margin:2px; border:1px solid #3c3c3c;}
にする
これで、5列表示できる
marginの設定はなくても5列になるけど
この値を変更することで
サムネイル画像の間隔を変更できる
スライドショーの画像の間隔も変更可能
デフォルトの間隔は20px
間隔を0にすると、本みたいになる
var opts = {margin:0};
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(opts,currentPage.attr('id'));
次に、自動スライドショーにする方法
デフォルトでは、画面をスワイプしないと次の画像はでない
自動スライドショーにしたいのなら
autoStartSlideshowオプションをつける
これにより、ギャラリー一覧が作れる
var opts = {autoStartSlideshow:true};
写真のサイトなので、画像のズームを無効化したいのなら
allowUserZoomをfalseにすれば設定できる
var opts ={allowUserZoom: false};
ズーム禁止じゃなくて、ズームレベルの制限をすることも可能
デフォルトだと
0.5~5倍のズームになっている
最小値は minUserZoom
最大値は maxUserZoom
で指定する
もし、等倍から倍までの制限をかけるなら
var opts = {minUserZoom:1,maxUserZoom:2};
となる
そして、あとはループの制御
デフォルトでは、最後までいったら最初にループして戻る
ギャラリーとかサンプル画面表示とかなら問題ないけど、マンガアプリとか
なんらかのコンテンツの場合なら
最後までいったらループはしない
ループさせたくないのなら
loop を falseへ設定する
var opts = {loop: false};