勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)

   2024/01/13  jQuery

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルスクリーン対応の画像ビューアを作成したかった。調べてみたところjQueryのプラグイン(Fotorama)で対応できそう。以下に実装方法とサンプルをメモ。

 

Fotorama

http://fotorama.io

 

サンプル

アスペクト比保ったまま

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>

カスタマイズのオプションに関しては以下に記載されている。

http://fotorama.io/customize/

 - jQuery

  関連記事

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法

jQueryの「DateTimePicker」プラグインで日付や時間選択時、あら ...

国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

jQueryでループを抜けようと(breakしようと)するとエラーになる際の対応方法

jQueryでループを抜けようと(breakしようと)すると「Uncaught ...