勉強したことのメモ

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

  関連記事

PHPとajaxでチャットの作成

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

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

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

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

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

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

みたいなソース ...

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

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

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

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

imgタグとPHPでグラフ作成

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

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

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

要素の表示or非表示

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

jQueryでのやりたい事

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