PhotoSwipeプラグインの使い方！スマホサイトのギャラリーに使える！
スマホサイト向けのサイトで、写真をたくさん見せたい時に使えるライブラリ「PhotoSwipe」が便利です。タッチすると全画面で表示して、次へ次へとスワイプも可能です。
目次
PhotoSwipeの使い方
各ファイルをダウンロード
まずはPhotoSwipe公式サイトから、ファイル一式をダウンロードします。
Script/CSSファイルを読み込み
<link href="photoswipe.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="klass.min.js"></script> <script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>
起動
<script>
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
この例だと、Galleryというidの中のaタグに適用します。
HTML
<ul id="Gallery"> <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li> <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li> <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li> <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li> <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li> <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li> </ul>
上から順番に読み込まれます。これだけで設置は完了。
ギャラリーに最適
サムネイルの一覧はCSSで自由に変更可能です。
クリックすると、拡大。スワイプか矢印ボタンで次の写真に移動。自動再生もあります。
iOSもAndroidもBlackBerryも対応しているようです。
[sc name=”engeneer”]
SPONSER
SHARE
YouTube
PROFILE
