勉強したことのメモ

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

  関連記事

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...

jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...

tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)

テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...