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

2015/01/08

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

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>

1	<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>

</a>

</a>

</a>

</div>

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

http://fotorama.io/customize/

- jQuery

: PHPとajaxでチャットの作成

■ソース・index.php <? error_reporting(E_ ...

: FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

: htmlタグが入った内容の文字を丸める

phpである文字列が○文字以上だった際、省略してお尻に「……」をつけたいという ...

jQueryのfind時に複数のセレクタ指定

<div id="hoge">
	<a href="aaa.html">aaa</a>
	<div>
		bbb
	</div>
</div>

<div>

bbb

</div>

みたいなソース ...

: AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

: 画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示するというのがlightbox ...

: imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る機会があったのでメモ。 ■サンプル ...

: jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

: 要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

: jQueryでのやりたい事

フォーム周りをよく使うのでまとめておく。・テキストボックスのvalue取得、書 ...

PREV: PHPでユニークな文字列の作成
NEXT: jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

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

関連記事