スワイプ・フルスクリーン・サムネイル対応の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で配列の値を検索
やりたかった事は、配列の中に特定の値があるか どうか検索し、その後の分岐を行いた ...
-
-
jQuery Alert Dialogsで表示後に処理したい
最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...
-
-
jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...