できる!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 および ニコ動 です(現在確認ができている6動画)。

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

    デモ : 動画スライドショー(サムネールナビゲーション)    - YouTube, Vimeo, Dailymotion,Pandora.tv, Liveleak, ニコ動 - 6 枚

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

     使用ファイル

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

 2.使い方

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

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

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

  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. 動画スライドの書き方【サンプル1】 - YouTube,Vimeo ドットナビゲーション+デフォルトのスプラッシュ画像 (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=Jpb9uP98QJw" data-caption="プライベートジェット機10選"></a>
     <a href="http://vimeo.com/61527416" data-caption="Vimeo">Celestial Dynamics</a>
    </div>
     


  4. 動画スライドの書き方【サンプル2】 - 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. 動画スライドの書き方【サンプル3】 - 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. 動画スライドの書き方【サンプル4】 - Dailymotion, Pandora.tv, Liveleak, ニコ動 (HTML)

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


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




 最終更新日:2018.8.30(Debut)
メール mailto:  掲示板