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

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

基本的な使用方法

Fotoramaの基本機能(デフォルト)は、ドットナビゲーションによるスライドショーです。
下のHTMLコードに示すように設定します。 ・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>
・デモ(画像6枚 サイズ:1000x150、2枚目は640x163)
画像が表示されるFotoramaのステージ領域の大きさは、最初の画像のサイズで確保されます(デフォルト)。
上の例では、ステージ領域の大きさは、画像サイズの1000x150pxです。 その他の画像は、フィットするように比例してスケーリングされます(Fitオプション参照)。
2枚目の画像を見てください。元の大きさ640x163pxが、589X150pxにリサイズされ表示されています(Fitオプションがデフォルトの場合)。
最初の画像がロードされる前に、Fotoramaステージ の領域を確保するには、data-width、data-heigtなどのDimensionsオプションを使用します。

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

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

・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枚目 縦長に見せる)
サムネールのスライドショーを実現するには、その他2つ方法があります。
①IMGタグのみを使用する方法 - 画像ロードの3つの方法参照、②DIVタグを使用する方法 - 画像ロードの3つの方法参照

キャプションの使用方法

スライドショーで、キャプション(画像の説明文)を入れたい場合は、①オプションのdata-captionを使う ②画像をDIVタグで記述しDIVのテキストを使う の2つの方法があります。
いずれにしても、いわゆる映画の字幕イメージになります。 Fotoramaのステージ領域の外にキャプションを表示したい場合は、別にJavascriptをカスタマイズする必要があります。
下の例は、「②画像をDIVタグで記述し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")を使っていますが、
本項「キャプションの使用方法」と関係ありません。

画像ロードの3つの方法(まとめ)

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

オプション一覧

オプション(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>

オプション一覧

オプション一の詳細およびデモは一覧の「オプション総称」をクリックします。
項番オプション総称オプション名デフォルト 設定方法
1Dimensions

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"
2Thumbnails

サムネールナビゲーション
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:?
3Fullscreen

フルスクリーン
data-allowfullscreen, data-full*data-allowfullscreen:false(行わない)
data-full:未定義
data-allowfullscreen="false"|"true"

data-full="フルスクリーン用の大きな画像のURL"
4Video

動画
data-video*false(例)data-video="true"
YouTube,Vimeo以外の動画をロードするとき
5HTML

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一定で、横サイズが3:2の比で調整され、サムネール画像の大きさは96X64pxになる。
6Fit

画像の合わせ方
data-fit~, data-thumbfitdata-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(デフォルトのとき)。
7Transition

画像スライドの方法
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秒)
8Captions

キャプション
data-caption*-(例)data-caption="写真タイトル"
Fororama画面左下にキャプションを表示(透過なし)
9Hash

ハッシュリンク
data-hash, data-startindexdata-hash:false
data-startindex:0
data-hash="false"|"true"
"true"とき、画像を定義するタグにID名を書くことにより、その画像にハッシュリンクすることができる。
(リンク例)gallery.html#ID名

data-startindex="0"~(ゼロ0以上の数値を指定)
例えば1を指定すると、2枚目の画像がスタートの画像になる。
(リンク例)gallery.html
10Loop

スライドのループ
data-loopfalsedata-loop="false"|"true"
"true"のとき、最初と最後の画像でスライドをループすることができる。
11Autoplay

自動スライドショー
data-autoplay, data-stopautoplayontouch? data-autoplay:false

data-stopautoplayontouch:true
data-autoplay="false"|"true"
"true"のとき、自動スライドショー。

data-stopautoplayontouch="false"|"true"
"true"のとき、画像画面をクリクすると自動スライドショーを停止する。"false"のときは停止しないで継続する。
12Shuffle

画像の並び替え
data-shuffledata-shuffle:false data-shuffle="false"|"true"
"false"のとき、HTMLソースの並び順に表示する。
"true"のときは、画像をランダムに並び替え表示する。
13Keyboard

キーボード操作
data-keyboardfalse data-keyboard="false"|"true"
"true"のとき、キーボードの矢印キー(← →)で、画像を左右にスライドできる。
14Arrows, click, swipe

矢印ナビアイコンなど画面操作
data-arrows, data-click, data-swipe, data-trackpadtrue(行なう) (例)data-click="false"
"false"のとき、画像のクリックによる画像のスライドができない。
data-arrows:ナビゲーションアロー(矢印)アイコンのクリック  data-click:画像の上をクリック  data-swipe:スワイプ操作  data-trackpad:トラックパッドによる操作
15Navigation position

ナビゲーションの位置
data-navposition, data-navwidth data-navposition:'bottom'

data-navwidth:?
data-navposition="bottom"|"top"
"bottom"は、Fotoramaステージの下に配置、"top"は上に配置。

data-navwidth
16Right-to-left

右から左:アラビア語サイト対応
data-direction- data-direction="rtl"
"rtl"のとき、キャプション位置(右へ)、自動スライド移動方向(右から左へ)やナビゲーションの操作順番(右から左へ)のように変更。

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

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

  1. タイトル(キャプション)およびアクティブインデックス(いわゆる何枚目)「APIデモ」
  2. ボタンクリックで自動スライドショーの開始/停止や写真の並び替え「APIデモ」
  3. サムネールナビゲーションを自分で作る「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ページスライドシュー備考
1LightboxPrototypeからjQueryに変更(v2.51)モーダル人気
2PiroboxjQueryモーダル推奨
3Videoboxmootoolsモーダル
4Mediaboxmootoolsモーダル
5ShadowboxPrototype、 MooTools (requires 1.2 Core)、 Dojo Toolkit、
Yahoo! User Interface Library、
Ext (requires ext-core.js)、 非JSフレームを選択可
モーダル推奨
6ColorboxjQueryモーダル
7FotoramajQuery非モーダルスライダー
8FancyboxjQueryモーダル人気
動画とは、SWF、FLV、MOV、WMV(*1)  モーダルwindow:画像などメディアの表示は新しい別ウインドー(*2)

  最終更新日:2016.8.25