テック

Fancybox v4で動画／音楽ギャラリーを作る方法

2022年9月10日 by single コメントはまだありません

Fancybox v4で動画／音楽ギャラリーを作る方法

サンプル

動画リスト


ショパン

夜想曲第1番 変ロ短調 作品9-1 夜想曲第8番 変ニ長調 作品27-2 夜想曲第2番 変ホ長調 作品9-2

HTMLソース

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Fancybox Gallery demo(2)</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"  />
</head>
<body>
  <p>
    <h4>動画リスト</h4>
    <!-- HTML5 video custom dimensions -->
    <a data-fancybox="video-gallery" href="https://www.single-life.tokyo/wp-content/uploads/2022/09/shinkansen.mp4" data-caption="新幹線">
      <img src="https://www.single-life.tokyo/wp-content/uploads/2022/09/shinkansen.jpg" style="width:15%;height:15%;" />
    </a>

    <!-- YouTube -->
    <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=z2X2HaTvkl8" >
      <img src="http://i3.ytimg.com/vi/z2X2HaTvkl8/hqdefault.jpg" width="200" height="150" />
    </a>

    <!-- YouTube custom start time -->
    <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=dZRqB0JLizw&t=40s">
      <img src="http://i3.ytimg.com/vi/dZRqB0JLizw/hqdefault.jpg" width="200" height="150" />
    </a>

    <!-- Vimeo -->
    <a data-fancybox="video-gallery" href="https://vimeo.com/259411563">
      <img src="https://f.vimeocdn.com/images_v6/lohp/video1_thumbnail.png" width="200" height="150" />
    </a>

    <!-- Vimeo custom start time -->
    <a data-fancybox="video-gallery" href="https://vimeo.com/577635596#t=11m11s">
      <img src="https://i.vimeocdn.com/video/1194909913-14ae3f936b19d7106adf7bf7c04d557aaa5941dcf445e0b004c3c9e060b4b0ae-d?mw=700&mh=393&q=70" width="200" height="150" /    >
    </a>
  </p>

  <p>
    <h4>ショパン</h4>
    <a style="margin-right:10px"
      href="https://www.single-life.tokyo/wp-content/uploads/2022/09/NocturneinBflatminor_Op.9no.1.mp3"
      data-fancybox="music-galllery"
      data-type="html5video"
      data-thumb="https://www.single-life.tokyo/wp-content/uploads/2022/09/chopin-section1.jpg"
      data-caption="夜想曲第1番 変ロ短調 作品9-1"
    >
      夜想曲第1番 変ロ短調 作品9-1
    </a>

    <a style="margin-right:10px"
      href="https://www.single-life.tokyo/wp-content/uploads/2022/09/NocturnfoPiano_No.8inDflatMajor_Op.27_2.mp3"
      data-fancybox="music-galllery"
      data-type="html5video"
      data-thumb="https://www.single-life.tokyo/wp-content/uploads/2022/09/chopin01.jpg"
      data-caption="夜想曲第8番 変ニ長調 作品27-2"
    >
      夜想曲第8番 変ニ長調 作品27-2
    </a>

    <a 
      href="https://www.single-life.tokyo/wp-content/uploads/2022/09/NocturneNo.2inEflatMajor_Op.9_2.mp3"
      data-fancybox="music-galllery"
      data-type="html5video"
      data-thumb="https://www.single-life.tokyo/wp-content/uploads/2022/09/trend_20200214145309.jpg"
      data-caption="夜想曲第2番 変ホ長調 作品9-2"
    >
      夜想曲第2番 変ホ長調 作品9-2 
    </a>
  </p>

   <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
</body>
</html>

デモ

動画ギャラリーを作成する

Fancyboxでは、Youtube、Vimeo 、HTML5の動画に対応しています。

動画が非表示になると動画は停止され、再表示されると同じ位置から再開されます。

HTMLマークアップ

<a data-fancybox="video-gallery" href="(動画URI)" >
   <img src="(サムネール画像URI) width="200" height="150" />
</a>

動画であろうと、HTMLマークアップも画像と同じです。

グルーピング

グルーピングも、「data-fancybox」プロパティの値を統一すれば、複数の動画を一つのギャラリーとして紐づけられます。

<a data-fancybox="video-gallery" href="(動画URI1)" >
   <img src="(サムネール画像URI3) width="200" height="150" />
</a>
<a data-fancybox="video-gallery" href="(動画URI2)" >
   <img src="(サムネール画像URI3) width="200" height="150" />
</a>
<a data-fancybox="video-gallery" href="(動画URI3)" >
   <img src="(サムネール画像URI3) width="200" height="150" />
</a>

音楽ギャラリーを作成する

HTMLマークアップ

<a
  href="（音楽ファイルURI）"
  data-fancybox="music-galllery"
  data-type="html5video"
  data-thumb="（サムネール画像URI）"
>
  mp3 file
</a>

まず、属性「data-type」に値『html5video』を指定してください。

なおかつ、再生時にサムネールを表示させるには属性「data-thumb」を設定し、値にサムネール画像のURIを指定してください。

グルーピング

<a
  href="（音楽ファイルURI1）"
  data-fancybox="music-galllery"
  data-type="html5video"
  data-thumb="（サムネール画像URI1）"
>
  mp3 file
</a>
<a
  href="（音楽ファイルURI2）"
  data-fancybox="music-galllery"
  data-type="html5video2"
  data-thumb="（サムネール画像URI2）"
>
  mp3 file
</a>
<a
  href="（音楽ファイルURI3）"
  data-fancybox="music-galllery"
  data-type="html5video"
  data-thumb="（サムネール画像URI3）"
>
  mp3 file
</a>

音楽も画像や動画と同様に、data-fancybox」プロパティの値を統一すれば、複数の音楽を一つのギャラリーとして紐づけられます。

ご参考

関連ページ