勉強したことのメモ

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
javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

jquery_logo
lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

jquery_logo
jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

jquery_logo
FullCalendarでtitle以外も表示させたい

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

jquery_logo
tableのヘッダーを残して表示(jquery-decapitate)

bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...

jquery_logo
jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

jquery_logo
テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

jquery_logo
配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

jquery_logo
jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

jquery_logo
jQuery UI Datepickerで日本の祝祭日を表示

やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...