Fotoramaのステージコンテナ（以下、Fotoramaステージと言う）の領域の大きさ
その他にDimensionsオプションには、data-ratio,data-minwidth,data-maxwidth,data-minheight,data-maxheightがあります。
横幅と高さの大きさをピクセル値で指定：data-width,data-heigt
<div class="fotorama"
data-width="800" <!-- 横幅を800pxで指定 -->
data-height="600"> <!-- 高さを600pxで指定 -->
<img src="1.jpg">
<img src="2.jpg">
</div>
Fotoramaステージの大きさの柔軟な設定
これらのDimensionsオプションには、data-ratio,data-minwidth,data-maxwidth,data-minheight,data-maxheightがあります。
大きさのレスポンシブな指定：data-widthとdata-ratioの組み合わせ
<div class="fotorama"
data-width="100%" <!-- 横幅を100％で指定 -->
data-ratio="800/600"> <!-- 横幅800対高さ600の比率（レシオ）で指定 -->
<!-- ↑ data-ratio="4/3"または data-ratio="1.33333" と書いても同じです -->
<img src="1.jpg">
<img src="2.jpg">
</div>
大きさを制限する指定：data-minwidth,data-maxwidth,data-minheight,data-maxheight
<div class="fotorama"
data-width="100%" <!-- 横幅を100%で指定 -->
data-ratio="800/600" <!-- 横幅800対高さ600の比率（レシオ）で指定 -->
data-minwidth="400" <!-- 横幅の最小値を400pxで指定 -->
data-maxwidth="1000" <!-- 横幅の最大値を1000pxで指定 -->
data-minheight="300" <!-- 高さの最小値を300pxで指定 -->
data-maxheight="100%"> <!-- 高さの最大値を100%で指定 -->
<img src="1.jpg">
<img src="2.jpg">
</div>
大きさをフルスクリーンで指定
<body style="margin: 0;"> <!-- BODYのマージンをゼロにする -->
<div class="fotorama"
data-width="100%" <!-- 横幅を100%で指定 -->
data-height="100%"> <!-- 高さを100%で指定 -->
<img src="1.jpg">
<img src="2.jpg">
</div>
</body>
Fotoramaのナビゲーションスタイル。デフォルトはドットナビゲーション。
サムネールナビゲーションの設定：data-nav="thumbs"
class="fotorama"のDIVタグにオプションdata-nav="thumbs"を追加し、 <div class="fotorama" data-nav="thumbs"> </div>に、IMGタグで表示画像（兼サムネール画像）を記述する方法。<div class="fotorama" data-nav="thumbs"> <img src="1.jpg"> <!-- 表示画像兼サムネール画像 --> <img src="2.jpg"> </div>
<div class="fotorama" data-nav="thumbs"> </div>に、Aタグで表示画像、IMGタグでサムネール画像を記述する方法（推奨）。
<div class="fotorama" data-nav="thumbs"> <a href="1.jpg"><img src="1_thumb.jpg"></a> <!-- Aタグで表示画像、IMGタグでサムネール画像 --> <a href="2.jpg"><img src="2_thumb.jpg"></a> </div>
サムネール画像の大きさの設定：data-thumbwidth,data-thumbheight,width,height
サムネール画像の大きさのデフォルト値は、64X64pxです。大きさを指定したい場合は、オプションdata-thumbwidth,data-thumbheightとIMGタグのwidth,heightパラメータを併用します。次のHTML例は、オプションdata-thumbheightで高さを一律48pxに固定して、それぞれの画像にてwidth,heightパラメータでレシオを指定し、横幅を調整しています。
<div class="fotorama" data-nav="thumbs" data-thumbheight="48"> <!-- 高さを一律48pxに固定 --> <a href="1.jpg"><img src="1_thumb.jpg" width="144" height="96"></a> <!-- 横幅と高さの比率144対96 横長--> <a href="2.jpg"><img src="2_thumb.jpg" width="144" height="214"></a> <!-- 横幅と高さの比率144対214 縦長--> </div>
Fotoramaステージを拡大してフルスクリーンへ移行。
通常のフルスクリーンの設定：data-allowfullscreen
class="fotorama"のDIVタグにオプションdata-allowfullscreen="true"を追加し、 <div class="fotorama" data-allowfullscreen="true"> </div>に、IMGタグで表示画像を記述します。<div class="fotorama" data-allowfullscreen="true"> <img src="1.jpg"> <img src="2.jpg"> </div>
ネイティブなフルスクリーンの設定：data-allowfullscreen
class="fotorama"のDIVタグにオプションdata-allowfullscreen="native"を追加し、 <div class="fotorama" data-allowfullscreen="native"> </div>に、IMGタグで表示画像を記述します。<div class="fotorama" data-allowfullscreen="native"> <img src="1.jpg"> <img src="2.jpg"> </div>
フルスクリーンで、Fotoramaステージとは別の大きな画像を設定：data-allowfullscreen,data-full
class="fotorama"のDIVタグにオプションdata-allowfullscreen="native"を追加し、 <div class="fotorama" data-allowfullscreen="native"> </div>に、IMGタグでステージの表示画像を記述し、 オプションdata-fullでフルスクリーンの画像を記述します。<div class="fotorama" data-allowfullscreen="native"> <img src="1.jpg" data-full="1_full.jpg"> <!-- data-full:フルスクリーンの表示画像 --> <img src="2.jpg" data-full="2_full.jpg"> </div>
YouTubeなどの動画ページをリンクして動画を埋め込む。
YouTubeやVimeo
もっとも簡単な方法：Fotaramステージに動画の埋め込みプレーヤが表示されますclass="fotorama"のDIVタグ<div class="fotorama"> </div>に、Aタグで動画ページをリンクします。 Aタグ<a href="....">>～</a>の～の部分のテキストは単なるメモになります。
<div class="fotorama"> <a href="http://youtube.com/watch?v=C3lWwBslWqg">YouTube AKB48</a> </div>
再生前の動画プレーヤに好きなプレビュー画像を被せる方法（ドットナビゲーション例）
class="fotorama"のDIVタグ<div class="fotorama"> </div>に、Aタグで動画ページをリンクします。 Aタグ<a href="xxx.jpg">～</a>に、IMGタグで動画プレーヤに被せる画像を記述します。
IMGタグで動画プレーヤの設定をしない場合は、動画のサムネール画像が表示されます。
<div class="fotorama">
<a href="http://youtube.com/watch?v=C3lWwBslWqg">
<img src="desert-rose.jpg"> <!-- 動画プレーヤに被せるプレビュー画像 -->
</a>
</div>
再生前の動画プレーヤに好きなプレビュー画像を被せる方法（サムネールビゲーション例）
class="fotorama"のDIVタグ<div class="fotorama">にサムネールオプションdata-nav="thumbs"を追加します。
class="fotorama"のDIVタグ<div class="fotorama" data-nav="thumbs"> </div>に、Aタグで動画ページのリンクし、
オプションdata-imgでサムネール画像を記述します。
Aタグ<a href="....">～</a>に、IMGタグで動画プレーヤに被せるプレビュー画像を記述します。
HTML<div class="fotorama" data-nav="thumbs">
<a href="http://youtube.com/watch?v=C3lWwBslWqg"
data-img="desert-rose.jpg"> <!-- 動画プレーヤに被せるプレビュー画像 -->
<img src="desert-rose_thumb.jpg"> <!-- ナビゲーションのサムネール画像 -->
</a>
</div>
youtube/vimeo以外のその他の動画のカスタマイズ（Dailymotion/veoh/FC2など）
class="fotorama"のDIVタグ<div class="fotorama"> </div>に、Aタグで動画ページをリンクし、オプションdata-video="true"を記述します。オプションdata-videoはyoutube/vimeo以外の場合に設定します。
リンクするURLの見つけ方はこちら。
Aタグ<a href="....">～</a>に、IMGタグで動画プレーヤに被せるプレビュー画像を記述します。
youtube/vimeo以外の場合、オプションdata-video="true"と併せて設定します。
<div class="fotorama">
<a href="http://dailymotion.com/embed/video/xxgmlg?autoplay=1" data-video="true">
<img src="xxgmlg_preview.jpg"> <!-- 動画プレーヤに被せるプレビュー画像 -->
</a>
<a href="http://dailymotion.com/embed/video/xu4jqv?autoplay=1" data-video="true">
<img src="xu4jqv_preview.jpg">
</a>
</div>
FotoramaのステージにHTMLテキストを表示。
更に、DIVタグに表示画像やサムネール画像を指定することもできます（オプションdata-img,data-thumb, data-thumbratio）。
HTMLテキストのみのスライド
最も簡単なHTMLテキストの設定方法class="fotorama"のDIVタグ<div class="fotorama"> </div>内のDIVブロックにテキスト、画像、テーブルなど記述します。（デモ ↓ ）
<div class="fotorama"> <div>One</div> <div><strong>Two</strong></div> <div><em>Three</em></div> </div>
One
Two
Three
スタイルシートでDIVブロックのHTMLテキストなどのカスタマイズ方法：文字の大きさ、表示位置や背景色など（デモ ↓ ）
<!-- 例 Style for custom HTML -->
<style type="text/css">
.customHtml {
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font-family: Georgia, serif;
font-size: 72px; /*文字の大きさ*/
text-align: center; /*文字の表示位置*/
height: 181px; /*DIVブロックのサイズ（高さ）*/
padding-top: 50px; /*文字の表示場所*/
}
</style>
</head></body>
<div class="fotorama">
<div class="customHtmi">One</div>
<div class="customHtmi"><strong>Two</strong></div>
<div class="customHtmi"><em>Three</em></div>
</div>
One
Two
Three
通常の画像スライドにHTMLテキストを表示する方法
画像を併せて表示したい場合は、DIVタグにオプションdata-img,data-thumb, data-thumbratioを使用して、 画像（data-img）、サムネール画像（data-thumb）、サムネール画像の大きさ（data-thumbratio）を記述します。 オプションdata-thumbratioのデフォルトは64X64 pxです。data-thumbratioは、レシオ（横縦の比）で指定しますが、高さは64pxの一定になります。
<div class="fotorama" data-nav="thumbs">
<div class="customHtml customcolor" data-img="img1.jpg"
data-thumb="img1_thumb.jpg" data-thumbratio="144/96">新宿</div>
<div class="customHtml customcolor" data-img="img2.jpg"
data-thumb="img2_thumb.jpg" data-thumbratio="64/128"><strong>日光</strong></div>
<div class="customHtml customcolor" data-img="img3.jpg"
data-thumb="img3_thumb.jpg" data-thumbratio="1"><em>富士山</em></div>
</div>
新宿
日光
富士山
Fotoramaのステージへの表示画像の合わせ方。
contain：デフォルト。Fotoramaステージの大きさに合わせて、画像全体が表示できるように伸ばして（または縮めて）表示します。
cover： Fotoramaステージに完全に被るように伸ばして（または縮めて）とトリミングし表示します。
scaledown： Fotoramaステージより、画像が小さい場合はそのまま表示し、大きい場合はFotoramaステージの大きさまで縮めて表示します（画像全体を表示）。
none：画像自身の大きさで表示します。
オプションdata-fitを使用し、画像の合わせ方を記述します。Fotorama全体に指定したり、画像一つ一つにも指定できます。
<div class="fotorama" data-fit="cover" data-width="500" data-ratio="500/375"> <img src="1.jpg"> <!-- cover --> <img src="2.jpg" data-fit="contain"> <!-- contain --> <img src="3.jpg"> <!-- cover --> </div>
画像が、Fotoramaステージより横幅は小さく、高さは大きい場合
画像 200×300 蛙：
・表示画像の大きさ
contain：120X180
cover：240X360
scaledown：120X180
none：200X300
Fotoramaステージ 240×180：
画像が、Fotoramaステージより横幅も高さも小さい場合
画像 200×133 蝶：
・表示画像の大きさ
contain：240X160
cover：271X180
scaledown：200X133
none：200X133
Fotoramaステージ 240×180：
画像が、Fotoramaステージより横幅も高さも大きい場合
画像 480×360 豹：
・表示画像の大きさ
contain：240X180
cover：240X180
scaledown：240X180
none：480×360
Fotoramaステージ 240×180：
スライドの画像遷移の方法。
値は、slide（デフォルト）、crossfadeまたはdissolveを指定します。
slide：スライドする（デフォルト）
crossfade：フェードアウトし、次の画像がフェードインする-クロスフェード
dissolve：画面が暗くなるのにオーバーラップして次の画面が現われる-ディゾルブ
通常はdata-transitionを使用します。data-clicktransitionは、スワイプおよび画面クリックのときの画像遷移の方法を、data-transitionと併用して指定します。
また、その他にオプションに、data-transitiondurationがあります。data-transitiondurationは、画像遷移においてアニメーションが完了するまでの所要時間（ミリセカンド）を指定します。
画像遷移 transition
<div class="fotorama">に、オプションdata-transitionを追加します。<div class="fotorama" data-transition="crossfade"> <img src="1.jpg"> <img src="2.jpg"> </div>
Slide Crossfade
Dissolve
画像遷移 clicktransition
いわゆるスワイプ対応用にもうひとつ画像遷移オプションdata-clicktransitionがあります。data-transitionと併用して使用します。
また、オプションdata-transitiondurationを使用して画面遷移において、アニメーションがゆっくり動作すように３秒を指定しています。
<div class="fotorama" data-transition="slide"
data-clicktransition="crossfade
data-transitionduration="3000">
<img src="1.jpg">
<img src="2.jpg">
</div>
data-clicktransition="crossfade" data-transition="slide" data-transitionduration="3000"
キャプションを記入する。
他に、オプションHTMLを使用してキャプションを書き入れる方法があります。
キャプション
HTML
オプションdata-captionで、キャプションを記述します。<div class="fotorama"> <img src="img1.jpg" data-caption="1/3 新宿"> <img src="img2.jpg" data-caption="2/3 日光"> <img src="img3.jpg" data-caption="2/3 富士山"> </div>
デモ
ハッシュリンクを張る。
もう一つ、一般のリンクで最初に表示する画像を指定したい場合はオプションdata-startindexを使用します。
ハッシュリンク
HTML
class="fotorama"のDIVタグにオプションdata-hush="true"を追加し、リンクを張りたい画像のタグでID名を記述します。<div class="fotorama" data-hush="true"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg" ID="linkbanana"> </div>
デモ：新しいページでデモ
下のリンクをクリックします。新しいページのデモで3番目の画像（バナナ）が表示されます。fotorama-hash.html#linkbanana
スタートインデックス
HTML
class="fotorama"のDIVタグにオプションdata-startindex="1"を追加します(1は２枚目の画像）。<div class="fotorama" data-startindex="1"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
画像の遷移をループする。
画像が3枚以上のときに使用すると効果があります。
ループ
HTML
class="fotorama"のDIVタグにオプションdata-hush="true"を追加します。<div class="fotorama" data-loop="true"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
デモ（３枚）：画像やアローナビゲーションアイコンをクリックします
自動スライドショーを行う。
自動スライドショーの動作中に、画像画面をクリックして手動でスライドさせることができますが、自動スライドショーは停止します。
停止しないで継続したい場合は、 オプションdata-stopautoplayontouch="false"を追加します（デフォルトは"true")。
オートプレイ
HTML
class="fotorama"のDIVタグにオプションdata-autoplay="true"を追加します。<div class="fotorama" data-autoplay="true" data-stopautoplayontouch="false"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
デモ（１０枚）
ボタンクリックによるオートプレイのスタート（ページ開始後）
Fotoramaのページが表示された後に、ボタンクリクにより、手動でスライドショー（オートプレイ）を開始したい場合は、 Javascriptを使用し、オプションautoplayを設定します。その他のautoplay以外のオプションは、class="fotorama"のDIVタグに設定します。 オプションautoplayのパラメータはdata-autoplayと同様です。
画像の表示順番をシャッフルする。
シャッフル
HTML
class="fotorama"のDIVタグにオプションdata-autoplay="true"を追加します。<div class="fotorama" data-shuffle="true"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
デモ（１０枚）元の並び順に番号が振ってあります（左下丸数字）
矢印キーでキーボードナビゲーションを行う。
キーボードナビゲーション
HTML
class="fotorama"のDIVタグにオプションdata-keyboard="true"を追加します。<div class="fotorama" data-keyboard="true"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
デモ：新しいページでデモ
アローアイコン-矢印アイコン（Arrows）、画像クリック（click）およびスワイプ（swipe）で画像を操作。
アローアイコン（Arrows）、画像クリック（click）、スワイプ（swipe）およびトラックパッド（trackpad）
HTML
必要に応じ、class="fotorama"のDIVタグにオプションdata-arrows="true"、data-click="true"、data-swipe="false"などを追加します。
<div class="fotorama" data-arrows="true" data-click="true"
data-swipe="false">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
デモ：新しいページでデモ
ナビゲーションの位置を設定する。
ナビゲーションの位置
HTML
ナビゲーションを上に置きたい場合は、class="fotorama"のDIVタグにオプションdata-navposition="top"を追加します。<div class="fotorama" data-navposition="top"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
デモ
Fotoramaの動作方向を反転（右から左へスライド）する。
右から左へスライド
HTML
ヘブライ語やアラビア語のサイトで、class="fotorama"のDIVタグにオプションdata-direction="rtl"を追加します。<div class="fotorama" data-direction="rtl"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> </div>
デモ：左側ステージ（data-direction="rtl" 右から左）、右側ステージ（data-direction無指定）
