tobii

tobiiは画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプトです。

任意のHTML要素や画像だけでなく、YoutubeやVimeoなどの動画や任意のWebページなども可能で、グループ化も出来ます。グループ化した際はスワイプにも対応しています。

以下動作サンプルを作りました。

一応貼りますけど、動かないみたい？なのでお手数ですがCodepenで直接ご確認下さい。

設定も非常にシンプルです。

<script src="tobii.min.js"></script>

スクリプトを読み込んで

const tobii = new Tobii()

初期化。あとはマークアップでセッティングします。

<a href="https://www.youtube.com/embed/Yds5jgqmYpE?autoplay=1" data-type="iframe" class="lightbox" data-group="iframe-youtube" data-width="1120" data-height="630">
	Youtube(直接リンクする場合)
</a>

例えばYoutubeならこんな感じでカスタムデータ属性でセッティングします。

<a href="#" data-type="youtube" data-id="RK1K2bCg4J8" class="lightbox" data-group="youtube">
	Youtube(idを指定するタイプ)
</a>

YoutubeはID指定も出来ます。

<a href="https://via.placeholder.com/600.jpg" class="lightbox" data-group="gallery">
	画像グループ1
</a>
<a href="https://via.placeholder.com/500.jpg" class="lightbox" data-group="gallery">
	画像グループ2
</a>

グループ化したい場合はdata-group="gallery"を指定すればいいだけみたいです。

設定も楽で他スクリプト等も不要ですのでなかなか使いやすいのではないでしょうか。ライセンスはMIT。

tobii