Formstone Lightbox のデモ（Boxer）

Formstone Lightbox のデモ画面でコードを見ているのですが、YouTube & Vimeo VideosのコードでvideoFormatterは必要なのでしょうか？
こちらを使用して、動画ギャラリーを作成したいと思っていますが、動画はYoutubeのみ使用予定です。

デモ画面
https://formstone.it/components/lightbox/demo/

YouTube & Vimeo Videosのjs

$(".lightbox").lightbox({
  videoFormatter: {
    "viddler": {
      pattern: /(?:viddler.com/)((v/)|(/u/\w/)|(embed/)|(watch?))??v?=?([^#\&?/]*)/,
      format: function formatViddler(parts) {
        return '//www.viddler.com/embed/' + parts[6];
      }
    }
  }
});

行動規範の内容に同意します

回答1件

ベストアンサー

Formstoneは公式のドキュメントがちょっと解りにくいですよね。

下記のような感じでvideoFormatterは、なくても動作します。

javascript
1<script>
2Formstone.Ready(function(){
3  $(".lightbox").lightbox({
4  });
5});
6</script>

ライブラリに依存関係がありますので、lightboxを利用するにはcore.js lightbox.jsの他にtouch.js transition.jsを読み込まないといけません。

cssはlightbox.cssが必要です。

なのでformstone lightboxでyoutubeを利用するもっともシンプルなコードはこんな感じだと思います。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8"/>
5
6<link href="dist/css/lightbox.css" rel="stylesheet">
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8<script src="dist/js/core.js"></script>
9<script src="dist/js/touch.js"></script>
10<script src="dist/js/transition.js"></script>
11<script src="dist/js/lightbox.js"></script>
12<script>
13Formstone.Ready(function(){
14  $(".lightbox").lightbox({
15  });
16});
17</script>
18</head>
19<body>
20<a href="//www.youtube.com/embed/zsJpUCWfyPE?rel=0&autoplay=1&fs=1" class="button lightbox" data-lightbox-gallery="video_gallery" title="Sed posuere consectetur est at lobortis.">
21YouTube Video
22</a>
23</body>
24</html>