スワイプ・フルスクリーン・サムネイル対応の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プラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
要素の点滅
やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法
お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...