勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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

   

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

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

 


 

■必要プラグイン

・Fotorama

http://fotorama.io

 


 

■サンプル

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

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

・アスペクト比無視

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

 


 

■使い方

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

あとは、

 

 

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

 

 

 

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

http://fotorama.io/customize/

 - jQuery

  関連記事

jquery_logo
jQueryで高速化

高速化について調べる機会があったのでメモ。 ------ ・セレクタはclass ...

jquery_logo
jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

jquery_logo
classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

jquery_logo
FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

jquery_logo
jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...

jquery_logo
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

jquery_logo
jQuery2.0がリリース

リリースされたとのこと。 http://blog.jquery.com/2013 ...

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

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

jquery_logo
プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...

jquery_logo
画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...