スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア
タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルスクリーン対応の画像ビューアを作成したかった。
jQueryのプラグインで対応できそうだったのでメモ。
■必要プラグイン
・Fotorama
■サンプル
・アスペクト比保ったまま
http://sample.taitan916.info/fotorama/?m=1
・アスペクト比無視
http://sample.taitan916.info/fotorama/
■使い方
jQueryとfotoramaのjs及びcssファイルを読み込んでおく。
あとは、
<div class="fotorama"></div>
で囲った部分に画像を置いておく。以下のような形。
<div class="fotorama" data-width="100%" data-ratio="600/400" data-nav="thumbs" data-loop="true" data-navposition="top" data-fit="cover"> <a href="./img/01.jpg"> <img src="./img/01.jpg" width="60" height="40"> </a> <a href="./img/02.jpg"> <img src="./img/02.jpg" width="60" height="40"> </a> <a href="./img/03.jpg"> <img src="./img/03.jpg" width="60" height="40"> </a> </div>
カスタマイズのオプションに関しては以下に記載されている。
関連記事
-
-
グラフ表示ライブラリのamChartsがよさそう
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...
-
-
スクロールしてもついてくる追尾型の広告を作る方法
スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...
-
-
FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード
FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...
-
-
Ajaxで画像のアップロード(jquery.upload)
業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...
-
-
jQueryで要素のleftやwidthを取得
jQueryで要素のposition(leftやtop)とwidthとheigh ...
-
-
formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...