できる! Fotoramで、動画スライドショーを作る デモ(Demo)
How to customize video on Fotorama.
~ YouTube, Dailymotion, Vimeo, Pandora.tv, Liveleak, ニコ動 ~

1. サムネールナビゲーション12. ドットナビゲーション23. ドットナビゲーション

この動画ギャラリーは、Fotorama 4.6.1 (Licensed under the MIT) で作成しています。

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


・ソースコード

 <div class="fotorama" data-nav="thumbs" data-hash="true" data-thumbheight="56" data-width="854" data-ratio="854/512">
  <a href="http://youtube.com/watch?v=GikLFsUXSGg"
     data-video="true" data-caption="YouTube ひたち海浜公園のチューリップ" data-img="img/video-yt1-slideshow01.jpg">
      <img src="img/video-yt2-slideshow01.jpg" width="16" height="9">
  </a>
  <a href="http://vimeo.com/61527416"
     data-video="true" data-caption="vimeo" data-img="img/video-vimeo-slideshow02.jpg">
      <img src="img/video-vimeo-slideshow02.jpg" width="16" height="9">
  </a>
  <a href="http://dailymotion.com/embed/video/xxgmlg?autoplay=1"
     data-video="true" data-caption="Dailymotion" data-img="img/video-daily-slideshow03.jpg">
      <img src="img/video-daily-slideshow03.jpg" width="16" height="9">
  </a>
  <a href="http://www.pandora.tv/view/qkfndk/55041808/embed"
     data-video="true" data-caption="pandora.tv - totonechan ep.004" data-img="img/video-toto-slideshow04.jpg">
      <img src="./img/video-toto-slideshow04.jpg" width="16" height="9">
  </a>
 <a href="http://www.liveleak.com/e/ClMp4_1542107404" data-img="img/video-liveleak-slide06.jpg"
     data-video="true" data-caption="Liveleak">
      <img src="./img/video-liveleak-slide06.jpg" width="16" height="9">
  </a>
  <a href="https://embed.nicovideo.jp/watch/sm34002122"
     data-video="true" data-caption="ニコニコ動画" data-img="img/video-nico-slideshow05.jpg">
      <img src="./img/video-nico-slideshow05.jpg" width="16" height="9">
  </a>
 </div>
 <ul class="lilist" style="margin-left:130px;padding-left:0;">
  <li class="liwidth">YouTube</li>
  <li class="liwidth">Vimeo</li>
  <li class="liwidth">Dailymotion</li>
  <li class="liwidth">Pandora.tv</li>
  <li class="liwidth">Liveleak</li>
  <li class="liwidth">niconico</li>
 </ul>

2.動画スライドショー (サムネールビゲーション2) ~ YouTube, vimeo - 5枚

Celestial Dynamics
・ソースコード

<div class="fotorama"data-nav="thumbs" data-width="800" data-ratio="800/482">
  <a href="https://www.youtube.com/watch?v=sr--GVIoluU" data-caption="YouTube DA PUMP / U.S.A. "></a>
  <a href="http://youtube.com/watch?v=Jpb9uP98QJw" data-caption="最も高価で豪勢なプライベートジェット10選" > </a>
  <a href="http://vimeo.com/61527416" data-caption="Vimeo" >Celestial Dynamics</a>
  <a href="https://www.youtube.com/watch?v=Wq9bDhFaLfo" data-caption="泉里香、ワンピース“水着ナミ”で抜群スタイル披露"></a>
  <a href="https://www.youtube.com/watch?v=sSypkSewrAo" data-caption="「左の腕で連れ去って…」MV 45秒Ver. / AKB48[公式] "></a>
</div>

3.動画スライドショー (ドットナビゲーション)
  ~ Dailymotion, vimeo, YouTube, Pandora.tv, Liveleak, ニコ動  - 6枚

・ソースコード

<div class="fotorama" data-nav="dots" data-width="600" data-ratio="600/370">
  <a href="http://dailymotion.com/embed/video/xxgmlg?autoplay=1"
     data-video="true" data-caption="dailymotion" data-img="img/video-daily-slideshow03.jpg">
  </a>
  <a href="http://vimeo.com/61527416"
     data-video="true" data-caption="Vimeo">
      <img src="img/video-vimeo-slideshow02.jpg" width="16" height="9">
  </a>
  <a href="http://youtube.com/watch?v=GikLFsUXSGg" data-video="true" data-caption="YouTube">
   <img src="img/video-slideshow01.jpg" width="16" height="9">
  </a>
 <a href="http://www.pandora.tv/view/qkfndk/55041808/embed"
     data-video="true" data-caption="pandora.tv">
      <img src="./img/video-toto-slideshow04.jpg" width="16" height="9">
  </a>
 <a href="http://www.liveleak.com/e/ClMp4_1542107404"
     data-video="true" data-caption="Liveleak">
      <img src="./img/video-liveleak-slide06.jpg" width="16" height="9">
  </a>
  <a href="https://embed.nicovideo.jp/watch/sm34002122"
     data-video="true" data-caption="ニコニコ動画">
      <img src="./img/video-nico-slideshow05.jpg" width="16" height="9">
  </a>
</div>

≫Fotoramで、動画スライドショー解説ページへ

(c) 2011-2018 Artem Polikarpov




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