簡単設置！きれいな画像スライダー／スマホ対応、強力なjQueryギャラリーFotorama

FotoramaはJQuery系の画像ギャラリー（スライダー）のスクリプトです。
設置方法がとても簡単で、画像のみならず、HTMMLテキストや動画もスライドできます。
また、デスクトップだけでなく、スマホなど、さまざまなデバイスに対応しています。
ブログに設置しても、とても相性がよく問題なく表示されます（Livedoor,Ameba,Fc2で確認）
Fotoramaの必要なファイルは、CDNjsサイトに登録されていますので、面倒なダウンロードやインストールは必要ありません。
FotoramaのライセンスはMIT です。Fotorama (c) Artem Polikarpov
本ドキュメントは、「TOP」、「オプションとカスタマイズ」および「Fotoramaデモ」の３編から成っています。
上の[Fotorama Menu]を使うと、すべてのページへリンクします。

基本的な使用方法

Fotoramaの基本機能（デフォルト）は、ドットナビゲーションによるスライドショーです。
下のHTMLコードに示すように設定します。

jQueryファイルの記述します(1.)
fotoramaのCSSとJSファイルの記述します(2.)
<div class="fotorama"></div>に、IMGタグで画像を記述します(3.)
Fotoramaのクラス名は、fotoramaです。

・HTML

<html>
<head>

<!-- 1. jQueryファイル (1.8 or later), Googleサイトよりロード -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- 2. fotorama.css と fotorama.jsファイル CDNjsサイトよりロード -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

</head>
<body>
<!-- 3. <div class="fotorama"></div>にIMGタグで画像を記述します -->
<div class="fotorama">
  <img src="images/yun01-hawai1000x150.jpg">
  <img src="images/yun06-nikko640x163.jpg">
  <img src="images/yun02-okinawa1000x150.jpg">
  <img src="images/yun03-shinjuku1000x150.jpg">
  <img src="images/yun04-shinjuku1000x150.jpg">
  <img src="images/yun05-nikko1000x150.jpg">
</div>

</body>
</html>

・デモ（画像６枚　サイズ：1000x150、２枚目は640x163）

画像が表示されるFotoramaのステージ領域の大きさは、最初の画像のサイズで確保されます（デフォルト）。
上の例では、ステージ領域の大きさは、画像サイズの1000x150pxです。その他の画像は、フィットするように比例してスケーリングされます（Fitオプション参照）。
2枚目の画像を見てください。元の大きさ640x163pxが、589X150pxにリサイズされ表示されています（Fitオプションがデフォルトの場合）。
最初の画像がロードされる前に、Fotoramaステージの領域を確保するには、data-width、data-heigtなどのDimensionsオプションを使用します。

サムネールナビゲーションの使用方法

サムネール画像をクリックしてスライドショーを行うための基本的な設定は、

DIVタグに、Fotoramaのナビゲーションスタイルのオプションdata-nav="thumbs"を追加します。
<div class="fotorama" data-nav="thumbs"></div>に、Aタグで表示画像を、IMGタグでサムネール画像を記述します。

・HTML

<!-- 2. <div class="fotorama"></div>に、Aタグで表示画像を、IMGタグでサムネール画像を記述します。 -->
<div class="fotorama" data-nav="thumbs">
  <a href="images/m/pixabay13-675x450.jpg"><img src="images/m/pixabay13-s.jpg" width="144" height="96"></a>
  <a href="images/m/pixabay02-337x450.jpg"><img src="images/m/pixabay02-s.jpg" width="64" height="128"></a>
  <a href="images/m/pixabay03-675x450.jpg"><img src="images/m/pixabay03-s.jpg"></a>
  <a href="images/m/pixabay06-360x450.jpg"><img src="images/m/pixabay06-s.jpg" width="64" height="128"></a>
  <a href="images/m/pixabay12-675x450.jpg"><img src="images/m/pixabay12-s.jpg"></a>
  <a href="images/m/pixabay15-675x450.jpg"><img src="images/m/pixabay15-s.jpg"></a>
  <a href="images/m/pixabay16-675x450.jpg"><img src="images/m/pixabay16-s.jpg"></a>
  <a href="images/m/pixabay17-348x450.jpg"><img src="images/m/pixabay17-s.jpg" width="64" height="128"></a>
  <a href="images/m/pixabay18-675x450.jpg"><img src="images/m/pixabay18-s.jpg"></a>
  <a href="images/m/pixabay21-355x450.jpg"><img src="images/m/pixabay21-s.jpg" width="64" height="128"></a>
</div>

・デモ（画像10枚　サイズ：上HTMLコード参照、高さ450）

サムネール画像の実際の大きさに関わらず、サムネールの表示の大きさは、64X64（デフォルト値）です。
サムネールの表示の大きさを指定したい場合は、IMGタグのwidth,heightで横縦レシオで指定します。
（例）width="64" height="128"（下デモの2,4,8,10枚目縦長に見せる）
サムネールのスライドショーを実現するには、その他２つ方法があります。
①IMGタグのみを使用する方法 - 画像ロードの３つの方法参照、②DIVタグを使用する方法 - 画像ロードの３つの方法参照

キャプションの使用方法

スライドショーで、キャプション（画像の説明文）を入れたい場合は、①オプションのdata-captionを使う　②画像をDIVタグで記述しDIVのテキストを使うの２つの方法があります。
いずれにしても、いわゆる映画の字幕イメージになります。 Fotoramaのステージ領域の外にキャプションを表示したい場合は、別にJavascriptをカスタマイズする必要があります。
下の例は、「②画像をDIVタグで記述しDIVのテキストを使う」の方法です。

サムネールナビゲーションの場合は、DIVタグにオプションdata-nav="thumbs"を追加します
<div class="fotorama"></div>に、DIVタグでオプションdata-imgに表示画像、
またサムネールナビゲーションの場合はオプションdata-thumbにサムネール画像を記述し、そのDIV内にHTMLテキストを記述します。
（例） <div data-img="1.jpg" data-thumb="1-s.jpg" data-caption="スタート" data-thumbratio="64/128"><strong>Two</strong></div>

・HTML

（ドットナビゲーションの場合）
<div class="fotorama" data-autoplay="true" data-allowfullscreen="true" style="background:#000000;width:600px">
  <div data-img="images/m/pixabay13-675x450.jpg" 
      data-caption="スタート"><font color=white>1/10 砂漠</font></div>
  <div data-img="images/m/pixabay02-337x450.jpg"><font color=white>2</font></div>
  <div data-img="images/m/pixabay03-675x450.jpg"><font color=white>3</font></div>
  <div data-img="images/m/pixabay06-360x450.jpg"><font color=white>4</font></div>
  <div data-img="images/m/pixabay12-675x450.jpg"><font color=white>5</font></div>
  <div data-img="images/m/pixabay15-675x450.jpg"><font color=white>6</font></div>
  <div data-img="images/m/pixabay16-675x450.jpg"><font color=white>7</font></div>
  <div data-img="images/m/pixabay17-348x450.jpg"><font color=white>8</font></div>
  <div data-img="images/m/pixabay18-675x450.jpg"><font color=white>9</font></div>
  <div data-img="images/m/pixabay21-355x450.jpg"><font color=white>10/10</font></div>
</div>

（サムネールナビゲーションの場合）
<div class="fotorama" data-nav="thumbs" data-autoplay="true" data-allowfullscreen="true" style="background:#000000;width:600px">
<div data-img="images/m/pixabay13-675x450.jpg" data-thumb="images/m/pixabay13-s.jpg"
   data-caption="スタート"><font color=white>1/10 砂漠</font></div>
   <!-- 以下省略 -->
</div>

・デモ（ドットナビゲーション画像10枚）

1/10 砂漠

2/10

3/10

4/10

5/10

6/10

7/10

8/10

9/10

10/10

Fotoramaステージの背景色を黒にしています。このためクラス名fotaramaのDIVの横の大きさを画像の大きさ(675px)に合わせています。
デモは、自動スライド（data-autoplay="true"）、フルスクリーンスライド（data-allowfullscreen="true"）を使っていますが、
本項「キャプションの使用方法」と関係ありません。

画像ロードの３つの方法（まとめ）

前記、「基本的な使用方法」、「サムネールナビゲーションの使用方法」および「キャプションの使用方法」まとめです。
サムネールナビゲーションの例で説明します（オプションdata-nav="thumbs"指定）。ドットナビゲーションのときはオプションdata-navを省略します。

IMGタグ

「基本的な使用方法」を合せて参照

<div class="fotorama" data-nav="thumbs">
  <img src="1.jpg"> <!-- 表示画像兼サムネール画像  -->
  <img src="2.jpg">
</div>

Aタグ

「サムネールナビゲーションの使用方法」を合せて参照

<div class="fotorama" data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg"></a> <!-- Aタグで表示画像、IMGタグでサムネール画像 -->
  <a href="2.jpg"></a> <!-- Aタグで表示画像とサムネール画像兼用 -->
  <a href="3.jpg" data-thumb="3_thumb.jpg"></a><!-- Aタグで表示画像、オプションdata-thumbでサムネール画像 -->
</div>

DIVタグ

「キャプションの使用方法」を合せて参照

<div class="fotorama" data-nav="thumbs"> 
  <div data-img="img1.jpg" data-thumb="img1_thumb.jpg" 
          data-thumbratio="144/96">新宿</div>
  <div data-img="img2.jpg" data-thumb="img2_thumb.jpg" 
          data-thumbratio="64/128"><strong>日光</strong></div>
  <div data-img="img3.jpg data-thumb="img3_thumb.jpg"><em>富士山</em></div>
</div>

オプション一覧

オプション（data-xxxxx）の書き方

<div class="fotorama"
     data-width="700" data-maxwidth="100%"
     data-ratio="16/9" data-allowfullscreen="true"
     data-nav="thumbs">
  <img src="1.jpg" data-fit="scaledown">
  <img src="2.jpg">
</div>

オプション一覧

オプション一の詳細およびデモは一覧の「オプション総称」をクリックします。

項番	オプション総称	オプション名	デフォルト	設定方法
1	Dimensions Fotoramaステージの領域の大きさ	data-width, data-height data-minwidth, data-maxwidth data-minheight, data-maxheight data-ratio data-margin, data-glimpse	最初の画像の大きさ	width,heghtは、ピクセル値または、％付き数値。（例）data-width="800" data-height="100%" data-ratioは、横縦の比率で指定。（例）data-ratio="800/600"
2	Thumbnails サムネールナビゲーション	data-nav data-thumbwidth, data-thumbheight data-thumbmargin, data-thumbborderwidth	data-nav：dot（ドットナビ） data-thumbwidth, data-thumbheight：64 data-thumbmargin, data-thumbborderwidth：？	data-nav="dot"｜"thumbs"｜"false" （例）data-nav="thumbs"（サムネールナビ）（例）data-nav="false"（"false"のときは、ナビゲーションを表示しない。） data-thumbwidth, data-thumbheight：サムネール画像の大きさ（ピクセル）（例）data-thumbheight="32" data-thumbmargin, data-thumbborderwidth：？
3	Fullscreen フルスクリーン	data-allowfullscreen, data-full*	data-allowfullscreen：false（行わない） data-full：未定義	data-allowfullscreen="false"｜"true" data-full="フルスクリーン用の大きな画像のURL"
4	Video 動画	data-video*	false	（例）data-video="true" YouTube,Vimeo以外の動画をロードするとき
5	HTML HTMLテキスト（右HTMLのDIVブロック'新宿'）	data-img, data-thumb, data-thumbratio* （HTML) <div class="fotorama" data-nav="thumbs"> <div data-img="1.jpg" data-thumb="1-thumb.jpg" data-thumbratio="3/2">新宿</div> </div>	-	ロードする画像やサムネール画像をDIVタグで指定する場合使用する。（例）data-img="1.jpg" data-thumb="1-thumb.jpg" また、サムネール画像のアスペクト比を指定したいとき、（例）data-thumbratio="3/2" 。サムネール画像のデフォルトサイズは、64X64。上の例の場合、高さは常に64px一定で、横サイズが３：２の比で調整され、サムネール画像の大きさは96X64pxになる。
6	Fit 画像の合わせ方	data-fit~, data-thumbfit	data-fit：'contain' data-thumbfit：'cover' (サムネール画像用）	data-fit="contain"｜"cover"｜"scaledown"｜"none" contain：Fotoramaステージの大きさに合わせて、画像全体が表示できるように伸ばして（または縮めて）表示。 cover： Fotoramaステージに完全に被るように伸ばして（または縮めて）とトリミングし表示。 scaledown： Fotoramaステージより、画像が小さい場合はそのまま表示し、大きい場合はFotoramaステージの大きさまで縮めて表示（画像全体を表示）。 none：画像自身の大きさで表示。 data-thumbfit="contain"｜"cover"｜"scaledown"｜"none" data-fitに同じ。Fotoramaステージをサムネールフレームと読みかえてる。サムネールフレームの大きさは64X64px（デフォルトのとき）。
7	Transition 画像スライドの方法	data-transition, data-clicktransition, data-transitionduration	data-transition：'slide' data-clicktransition：'slide' data-transitionduration：-	data-transition="slide"｜"crossfade"｜"dissolve" （通常の設定） data-clicktransition="slide"｜"crossfade"｜"dissolve" （スワイプおよびクリックのとき、「通常」と別のアニメーション） slide：左から右へスライドする crossfade：フェードアウトし、次の画像がフェードインする-クロスフェード dissolve：画面が暗くなるのにオーバーラップして次の画面が現われる-ディゾルブ data-transitionduration="3000"（ゆっくりスクロールアニメーション3秒）
8	Captions キャプション	data-caption*	-	（例）data-caption="写真タイトル" Fororama画面左下にキャプションを表示（透過なし）
9	Hash ハッシュリンク	data-hash, data-startindex	data-hash：false data-startindex：0	data-hash="false"｜"true" "true"とき、画像を定義するタグにID名を書くことにより、その画像にハッシュリンクすることができる。 (リンク例）gallery.html#ID名 data-startindex="0"～（ゼロ0以上の数値を指定）例えば1を指定すると、２枚目の画像がスタートの画像になる。 (リンク例）gallery.html
10	Loop スライドのループ	data-loop	false	data-loop="false"｜"true" "true"のとき、最初と最後の画像でスライドをループすることができる。
11	Autoplay 自動スライドショー	data-autoplay, data-stopautoplayontouch?	data-autoplay：false data-stopautoplayontouch：true	data-autoplay="false"｜"true" "true"のとき、自動スライドショー。 data-stopautoplayontouch="false"｜"true" "true"のとき、画像画面をクリクすると自動スライドショーを停止する。"false"のときは停止しないで継続する。
12	Shuffle 画像の並び替え	data-shuffle	data-shuffle：false	data-shuffle="false"｜"true" "false"のとき、HTMLソースの並び順に表示する。 "true"のときは、画像をランダムに並び替え表示する。
13	Keyboard キーボード操作	data-keyboard	false	data-keyboard="false"｜"true" "true"のとき、キーボードの矢印キー（← →）で、画像を左右にスライドできる。
14	Arrows, click, swipe 矢印ナビアイコンなど画面操作	data-arrows, data-click, data-swipe, data-trackpad	true（行なう）	（例）data-click="false" "false"のとき、画像のクリックによる画像のスライドができない。 data-arrows：ナビゲーションアロー（矢印）アイコンのクリック　 data-click：画像の上をクリック　 data-swipe：スワイプ操作　 data-trackpad：トラックパッドによる操作
15	Navigation position ナビゲーションの位置	data-navposition, data-navwidth	data-navposition：'bottom' data-navwidth：?	data-navposition="bottom"｜"top" "bottom"は、Fotoramaステージの下に配置、"top"は上に配置。 data-navwidth
16	Right-to-left 右から左：アラビア語サイト対応	data-direction	-	data-direction="rtl" "rtl"のとき、キャプション位置（右へ）、自動スライド移動方向（右から左へ）やナビゲーションの操作順番（右から左へ）のように変更。

API タイトルとアクティブインデックスのカスタマイズ

Fotoramaの標準機能では、タイトル（キャプション）は、コンテンツ（Fotoramaステージ）の上に表示さます。また、アクティブインデックス（いわゆる何枚目）の表示がサポートされていません。
タイトルを表示コンテンツの外に表示したり、アクティブインデックス（いわゆる何枚目）を表示するためには、Fotorama APIを使いJabascriptとCSSを追加する必要があります。
また、オートプレイAutoplayやシャッフルShuffle（自動スライドショーや写真の並び替え）の機能は、Fotoramaページの開始時に動作します。
これを、Fotoramaページの開始後にボタンクリックで、自動スライドショーの開始や写真の並び替えを行いたい場合は、Fotorama APIを使用して実現します。

（API参照サイト）: タイトル関連API; アクティブインデックス関連API

TOPへ

photo by pixabay.com ／ photo by (c)Tomo Yun ／ powered by Fotorama (c) Artem Polikarpov

Lightbox系メディアビューア（まとめサイト内リンク）

No	ビューアー	JSフレームワーク	モーダル window*2	画像	動画*1	動画共有サイト動画	Webページ	スライドシュー	備考
1	Lightbox	PrototypeからjQueryに変更（v2.51)	モーダル	●				●	人気
2	Pirobox	jQuery	モーダル	●				●	推奨
3	Videobox	mootools	モーダル			●
4	Mediabox	mootools	モーダル		●	●	●
5	Shadowbox	Prototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、 Yahoo! User Interface Library、 Ext (requires ext-core.js)、非JSフレームを選択可	モーダル	●	●	●	●	●	推奨
6	Colorbox	jQuery	モーダル	●	●	●	●	●
7	Fotorama	jQuery	非モーダル	●	●	●	●	●	スライダー
8	Fancybox	jQuery	モーダル	●	●	●	●	●	人気
※動画とは、SWF、FLV、MOV、WMV（1)　 ※モーダルwindow：画像などメディアの表示は新しい別ウインドー（2）

最終更新日：2016.8.25