スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア

タブレット＆スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルスクリーン対応の画像ビューアを作成したかった。

jQueryのプラグインで対応できそうだったのでメモ。

■必要プラグイン

・Fotorama

http://fotorama.io

■サンプル

・アスペクト比保ったまま

http://sample.taitan916.info/fotorama/?m=1

・アスペクト比無視

http://sample.taitan916.info/fotorama/

■使い方

jQueryとfotoramaのjs及びcssファイルを読み込んでおく。

あとは、

<div class="fotorama"></div>

で囲った部分に画像を置いておく。以下のような形。

<div class="fotorama" data-width="100%" data-ratio="600/400" data-nav="thumbs" data-loop="true" data-navposition="top" data-fit="cover">
	<a href="./img/01.jpg">
		<img src="./img/01.jpg" width="60" height="40">
	</a>
	<a href="./img/02.jpg">
		<img src="./img/02.jpg" width="60" height="40">
	</a>
	<a href="./img/03.jpg">
		<img src="./img/03.jpg" width="60" height="40">
	</a>
</div>

カスタマイズのオプションに関しては以下に記載されている。

http://fotorama.io/customize/