スワイプ・フルスクリーン・サムネイル対応の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>
カスタマイズのオプションに関しては以下に記載されている。
関連記事
- 
					
													  
- 
					セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ... 
- 
					
													  
- 
					FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロードFlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ... 
- 
					
													  
- 
					Lightboxで画像拡大時に文字タイトルとリンクをつけるlightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ... 
- 
					
													  
- 
					jQuery UIでカレンダーピッカー(Datepicker)の利用方法フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ... 
- 
					
													  
- 
					NicEdit(WYSIWYGエディタ)とテキストエリアの切り替えチェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...