PCはもちろん、iPhone、Androidにも対応しているスライドショーのライブラリ「PhotoSwipe」

1つのHTMLでPC、iPhone、Android、BlackBerryに対応するスライドショーを作成出来るライブラリ。

PhotoSwipe from Computerlovers on Vimeo.

PhotoSwipe
http://www.photoswipe.com/

読み込むファイルは以下の3つ。

  <script type="text/javascript" src="simple-inheritance.min.js"></script>
  <script type="text/javascript" src="code-photoswipe-1.0.9.min.js"></script>
  <link rel="stylesheet" type="text/css" href="photoswipe.css" />

HTMLの記述は以下。

	<div id="Gallery">
		<div><a href="img/img01.jpg"><img class="gallery_img" src="img/img01.jpg" alt="Image 001" /></a></div>
		<div><a href="img/img02.jpg"><img class="gallery_img" src="img/img02.jpg" alt="Image 002" /></a></div>
		<div><a href="img/img03.jpg"><img class="gallery_img" src="img/img03.jpg" alt="Image 003" /></a></div>
		<div><a href="img/img04.jpg"><img class="gallery_img" src="img/img04.jpg" alt="Image 004" /></a></div>
		<div><a href="img/img05.jpg"><img class="gallery_img" src="img/img05.jpg" alt="Image 005" /></a></div>
		<div><a href="img/img06.jpg"><img class="gallery_img" src="img/img06.jpg" alt="Image 006" /></a></div>
	</div>

JavaScript部分は以下。

document.addEventListener('DOMContentLoaded', function(){
	Code.photoSwipe('a', '#Gallery', {loop: false});
}, false);

photoSwipe の第2引数にスライドショーに使用する画像のブロックのid名。第3引数はオプション。ここの指定で動作の変更が出来ます。今回は loop: false を指定している為、最後の画像で止まります(デフォルトは true の為、末尾の次が先頭に繋がったループに成ります)。

これを表示したものがこちら

右側に余白が発生していますね。

付属のサンプルを確認した所、bodyに以下のスタイルの指定が必要な様です。

body { padding: 0; margin: 0 }

これを設定するとこの様に綺麗に表示されました。

実際の動作はこちらで確認出来ます。

このサンプルの全ファイルはこちらからDL出来ます。

なお、iPhoneではデフォルトで(オプションの指定で変更できます)画像の拡大や回転にも対応しています。