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

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

使用方法
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サンプル

sponsors

「スマートフォン用画像ギャラリーの決定版「PhotoSwipe」」をシェアする

記事作成:
記事URL:

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