スマートフォン用画像ギャラリーの決定版「PhotoSwipe」

スマートフォンサイトでの画像ギャラリーを作る時PhotoSwipeを使用すると、ごくごく簡単です。
もちろんJavaScriptですのでappleのiPhone、iPadもOK。
また、Swipeの名の通り指で左右にやることで次の画像を見ることも可能です。

使用方法

PhotoSwipeからファイル一式をダウンロードします。


<link href="photoswipe.css" type="text/css" rel="stylesheet" />
<style>#Gallery{display:none;}</style>
<script type="text/javascript" src="simple-inheritance.min.js"></script>
<script type="text/javascript" src="code-photoswipe-1.0.12.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
	var thumbEls = Code.photoSwipe('a', '#Gallery', { preventHide: true });
		Code.PhotoSwipe.Current.show(0);
	}, false);
</script>

※今回は単純なフルスクリーンギャラリーです。
設定次第で階層を付けたものも可能です。あとはhtmlを以下のように単純に記述すれば完成です。


<div id="Gallery">
	<div class="gallery-item"><a href="画像パス"><img src="画像パス" alt="タイトル" /></a></div>
	<div class="gallery-item"><a href="画像パス"><img src="画像パス" alt="タイトル" /></a></div>
	<div class="gallery-item"><a href="画像パス"><img src="画像パス" alt="タイトル" /></a></div>
	<!-- 以下画像分 -->
</div>

サンプル

PhotoSwipeサンプル
Javascriptサンプルページ一覧

skuare.net