勉強したことのメモ

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

  関連記事

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

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

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...

ajaxのエラー詳細を取得する

success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...