スワイプ・フルスクリーン・サムネイル対応の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>
カスタマイズのオプションに関しては以下に記載されている。
関連記事
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...
jQueryで電話番号チェック
やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...
jQueryのtoggleに引数
社内のソースで、 $(".hoge").toggle(flg == 1? fal ...
imgタグとPHPでグラフ作成
プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...
tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...