コンテンツへスキップ →

PhotoSwipeプラグインの使い方!スマホサイトのギャラリーに使える!

スマホサイト向けのサイトで、写真をたくさん見せたい時に使えるライブラリ「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で自由に変更可能です。
demo1
クリックすると、拡大。スワイプか矢印ボタンで次の写真に移動。自動再生もあります。
demo2
iOSもAndroidもBlackBerryも対応しているようです。

PhotoSwipe

[sc name=”engeneer”]

SHARE

無料メルマガ<特典付き>

個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。

特典:個人開発の教科書<心得編>
これまでの個人開発経験を秘伝のタレ的な内容としてエッセンスをまとめました。35ページにわたる大ボリュームです。

個人開発のスキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも個人開発ノウハウを発信中!

PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)

カテゴリー: デザイン 開発奮闘記