勉強したことのメモ

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
簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...

jquery_logo
jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

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

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

jquery_logo
jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

jquery_logo
スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

jquery_logo
jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

jquery_logo
jQuery2.0がリリース

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

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

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

jquery_logo
画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

jquery_logo
jQueryでjsonデータを処理(parseJSON)

他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...