スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)
2024/01/13
タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルスクリーン対応の画像ビューアを作成したかった。調べてみたところjQueryのプラグイン(Fotorama)で対応できそう。以下に実装方法とサンプルをメモ。
Fotorama
サンプル
アスペクト比保ったまま
https://taitan916.info/sample/fotorama/?m=1
アスペクト比無視
https://taitan916.info/sample/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>
カスタマイズのオプションに関しては以下に記載されている。
関連記事
-
-
jQueryプラグインの作成
面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...
-
-
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)
やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
jQueryで偶数or奇数行に任意のClassを付与する方法
tableタグの1行目を除く偶数もしくは奇数行のtrタグに任意にClassを指定 ...
-
-
jQueryでiframe内の要素を呼び出し
jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...