注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

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


目次

tobii


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

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

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

Ads


一応貼りますけど、動かないみたい?なのでお手数ですが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

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG