勉強したことのメモ

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

  関連記事

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

PHPとSQLiteでi-mobileのデータをグラフ化する方法

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...

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

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

HTMLのカスタムデータ属性をjQueryで取得する際はキャッシュに注意する

ASPを使用したサイトでHTMLのカスタムデータ属性を取得し色々処理したかったん ...