できる！jQueryスライダープラグインFotoramで、動画スライドショーを作る
How to customize video on Fotorama - Video slideshows
～ YouTube, Dailymotion, Vimeo, Pandora.tv, Liveleak, ニコ動 ～

1. 使用ファイル ｜2. 使い方

YouTubeなど動画のスライドショーを作るには、jQuery系のスライダープラグインのひとつのFotoramaを使うと簡単に作成できます。
Fotoramaは、面倒なjavascriptは使用せずに動画ギャラリーを作成できます。
カスタマイズ可能な動画は、YouTube, Dailymotion, Vimeo, Pandora.tv, Liveleak および ニコ動 です（現在確認ができている６動画）。

動画スライドの場合、オンロード時や次ぎの（前の）動画へ移ったときに表示されるスプラッシュ画像（動画のサムネール画像）はつぎのように扱います。

    デモ ： 動画スライドショー（サムネールナビゲーション）    - YouTube, Vimeo, Dailymotion,Pandora.tv, Liveleak, ニコ動 - ６ 枚

このデモでは、すべての動画に用意したスプラッシュ画像を使用しています。用意する画像の大きさは、表示する動画の大きさ位に合わせます。
なお、サムネールナビゲーションのサムネール画像は自動的に縮小表示されます。デモの動画サイズは、854x480 。

YouTube

 ≫デモを新しいウインドウで見る（ソースコード付き）


    動画スライド領域の構成

動画スライド領域(dimensions)は、下図のとおりステージコンテナ域（stage container）とナビゲーションコンテナ域（navigation container）から構成されています。
ステージコンテナジ域(stage container)は、動画表示部とXボタンコントロール部（高さ32px）から成っています。
Xボタンをクリックすると、オンロード時の状態のスプラッシュ画像に戻ります。
ステージコンテナ域の大きさは、DIVタグの横幅 data-width 要素、高さ data-height 要素で定義します。


  図 - 動画スライド領域(dimensions)


<div class="fotorama" data-width="560" data-height="347">
  <a href="http://youtube.com/watch?v=GikLFsUXSGg"></a>
  <a href="http://vimeo.com/61527416"></a>
</div>


 １．使用ファイル

     使用ファイル

  1. xxxxx.html ： 自作ページ。
  2. fotorama.js, fptorama.css ： GitHub から「Downloa.zip」をダウンロードするか、 CDNサイト を使用します。
  3. jQuery ： CDNサイトのcode.jquery.com（英語）サイト、または解説サイト（日本議）を利用します。

 ２．使い方

使い方はつぎのとおりです。

  1. 必要に応じ、動画ごとにスプラッシュ画像を１枚用意 (画像)

    画像の大きさは、動画の表示サイズ位のものとします。
    なお、サムネールナビゲーションの場合に、ナビゲーション画像と動画に被せるスプラッシュ画像を別にしたいときは２枚用意します。

  2. fotorama.js, fptorama.css, jQueryファイルをインクルード (HTML)

    例はCDNサイト使用。

    
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Fotorama -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.js"></script>

  3. 動画スライドの書き方【サンプル１】 - YouTube,Pandora-TV ドットナビゲーション＋デフォルトのスプラッシュ画像 (HTML)

    動画スライド領域は、つぎのようにDIVタグに表示したい動画のリンクをAタグで記述します。例は、YouTube,Vimeoの場合です。 
    
<div class="fotorama" data-nav="dots" data-width="560" data-height="347">
 <a href="https://www.youtube.com/watch?v=SgezR20vdd0" data-caption="２０万本のヒガンバナが見頃"></a>
 <a href="https://www.youtube.com/watch?v=uHj4SIV7Dq0" data-caption="HC Gaming Arena Of Valor Season 23 Pandora TV "></a>
</div>


  4. 動画スライドの書き方【サンプル２】 - YouTube,Vimeo サムネールナビゲーション＋デフォルトのスプラッシュ画像 (HTML)

    動画スライド領域は、つぎのようにDIVタグに表示したい動画のリンクをAタグで記述します。例は、YouTube,Vimeoの場合です。 
    
<div class="fotorama" data-nav="thumbs" data-width="560" data-height="347">
 <a href="https://www.youtube.com/watch?v=Jpb9uP98QJw" data-caption="プライベートジェット機10選"></a>
 <a href="http://vimeo.com/61527416" data-caption="Vimeo">Celestial Dynamics</a>
</div>


  5. 動画スライドの書き方【サンプル３】 - YouTube,Vimeo サムネールナビゲーション＋自作のスプラッシュ画像 (HTML)

    動画スライド領域は、つぎのようにDIVタグに表示したい動画のリンクをAタグで記述し、スプラッシュ画像のIMGタグを<a></a>で囲み記述します。 例は、YouTube,Vimeoの場合です。 
    
 <div class="fotorama" data-nav="thumbs" data-width="600" data-ratio="600/370"
      data-thumbheight="64" data-navposition="top">
  <a href="https://vimeo.com/60447230" data-caption="Vimeo Toxic Pop - animations">
     <img src="img/vimeo-thumb-428415499_640.jpg" width="16" height="9">
  </a>
  <a href="http://youtube.com/watch?v=GikLFsUXSGg" data-caption="YouTube ひたち海浜公園のチューリップ">
      <img src="img/video-yt2-slideshow01.jpg" width="16" height="9">
  </a>
</div>

  6. 動画スライドの書き方【サンプル４】 - Dailymotion, Pandora.tv, Liveleak, ニコ動 (HTML)

    Dailymotion, Pandora.tv, Liveleak, ニコ動のソースコードは、上サンプル３のとおりです。
    サンプルは、デモを新しいウインドウで見る（ソースコード付き）を参照してください。
    Dailymotion, Pandora.tv, Liveleak,ニコ動の動画URLは、つぎのとおり埋め込みコード用のURLを使用します。


1. 使用ファイル ｜2. 使い方 ｜≫デモを新しいウインドウで見る（ソースコード付き）



 最終更新日：2018.8.30（Debut) 		メール mailto：  掲示板