勉強したことのメモ

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
画像をドラッグ&ドロップでアップロードする方法

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

jquery_logo
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

jquery_logo
classの取り扱い

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

jquery_logo
jQueryのappendとprepend

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

jquery_logo
jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

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

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

jquery_logo
ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

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

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

jquery_logo
lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...

jquery_logo
日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...