説明
トビダセSwipeライトボックスは、スワイプ操作に対応したフルスクリーンポップアップで画像や動画を開きます。
特徴:
- 画像や動画を表示するためのスワイプ可能なポップアップ
- YouTube、Vimeo、ニコニコ動画、Dailymotion、MP4に対応
- YouTube・Vimeo からタイトルとサムネイルを自動取得
- ポップアップスタイルが2種類: 標準ポップアップとズーム
- MP4 動画のサムネイルをブラウザ側で自動取得します (サーバー処理不要、自サイトホスト動画のみ)
- 自サイトホストの MP4 動画からサムネイルを自動取得します (ブラウザ側処理、サーバー不要)
- 管理画面で投稿タイプごとにポップアップのスタイルを切り替える
- 投稿エディターで個々のアイテムのスタイルを直接上書きします
- 投稿内の画像や動画をグループ化して、連続スライドショーとして表示する
- スライドショーをグループ境界でリセットします。
- スライドカウンター表示 (現在 / 合計)
- ループ再生、自動再生、ミュートオプション
- キャプション配置 (中央 / 左)
- キーボードナビゲーション ( , Esc)
- 管理バー対応 (z-index セーフ)
- ポップアップを開いたときのヒントアニメーション (モバイル)
ポップアップで画像を開く方法
- 投稿エディターに画像を挿入する
- 画像をクリック ブロックツールバーの「リンク」をクリック
- 「メディアファイル」を選択して保存する
動画の挿入方法
- 投稿エディター (テキストモード) の挿入したい位置にカーソルを置く
- 「TD動画」クイックタグボタンをクリック
- ダイアログに動画 URL を入力
- 必要に応じてサムネイルとキャプションを追加し、「挿入」をクリックします。
外部サービス
このプラグインは、動画のメタデータ (サムネイルとタイトル) を取得するために外部サービスに接続します。
これらのリクエストは、管理画面のエディタダイアログに動画 URL が入力されたとき、または [tdslb-movie] ショートコードを含む投稿が公開・保存されたときにのみ行われます。
YouTube
YouTube oEmbed API およびサムネイル CDN を通じてサムネイル画像と動画タイトルを取得します。
個人のユーザーデータは送信されず、動画 ID のみが使用されます。
利用規約: https://www.youtube.com/t/terms
プライバシーポリシー: https://policies.google.com/privacy
Vimeo
Vimeo v2 API を通じてサムネイル画像と動画タイトルを取得します。
個人のユーザーデータは送信されず、動画 ID のみが使用されます。
利用規約: https://vimeo.com/terms
プライバシーポリシー: https://vimeo.com/privacy
ニコニコ動画
ニコニコの公開 API (ext.nicovideo.jp) を通じてサムネイル画像と動画タイトルを取得します。
個人のユーザーデータは送信されず、動画 ID のみが使用されます。
利用規約: https://account.nicovideo.jp/rules/account
プライバシーポリシー: https://account.nicovideo.jp/rules/account
Dailymotion
Dailymotion の公開 API を通じてサムネイル画像と動画タイトルを取得します。
個人のユーザーデータは送信されず、動画 ID のみが使用されます。
利用規約: https://www.dailymotion.com/legal/terms
プライバシーポリシー: https://www.dailymotion.com/legal/privacy
スクリーンショット
インストール
tobidase-swipe-lightboxフォルダを/wp-content/plugins/にアップロードしてください。- WordPress 管理画面の「プラグイン」画面からプラグインを有効化
- [ツール] > [トビダセSLB] から設定を行います。
FAQ
-
画像をクリックしてもポップアップが開きません。
-
画像リンクが「メディアファイル」に設定されていることを確認してください。リンクが「添付ファイルページ」または「なし」に設定されていると、ポップアップは開きません。
-
動画でも使えますか ?
-
はい。YouTube、Vimeo、ニコニコ動画、Dailymotion、MP4に対応しています。投稿エディタの「Tobidase Movie」クイックタグボタンを使用して動画を挿入してください。
-
MP4 動画のサムネイルが自動取得されないのはなぜですか ?
-
自サイトでホストしている MP4 ファイルの場合、サムネイルはブラウザ内で動画から自動的に取得されます。別のウェブサイトでホストしているMP4ファイルの場合、そのサイトが明示的に許可していない限り、ブラウザはセキュリティ上の理由 (CORS) によりこの取得をブロックします。その場合は、サムネイル画像の URL を手動で入力してください。
-
- モバイル: 左右にスワイプするか、ポップアップの下部にあるナビゲーションボタンをタップしてください。
- PC: 画面左右の矢印ボタンをクリック、またはキーボードの キーを使用
- 閉じる: ✕ボタンをタップ、背景をタップ、または Esc キーを押す
評価
このプラグインにはレビューがありません。
貢献者と開発者
変更履歴
1.0.3
- Fix: When multiple images were inserted together in the visual editor, text typed right before/after an image could end up trapped inside the image’s link tag. Text is now automatically moved outside the link when the content is displayed, and a line break (Shift+Enter) right after an image is handled the same way.
- Fix: A paragraph containing several images is now automatically split (both in the visual editor and in the displayed page) so each image gets its own paragraph, letting you place text above/below each image without affecting the swipe grouping.
- Fix: Images inside figure blocks (block editor) with extra text inside the link previously failed to convert into a lightbox at all; this is now corrected.
- Improve: Clicking an image link and pressing the Left/Right arrow key now moves the cursor out of the link (still inside the same paragraph), so text and line breaks typed next to an image no longer get trapped inside the link tag.
- Improve: Redesigned the “swipe” mode badge icon — the center frame is now a tall rectangle instead of a square, with a wide white bar appearing to pass behind it (evoking a filmstrip), instead of two separate faded side chips.
1.0.2
- 新機能: エディターで自サイトホストの MP4 ファイルからサムネイルを自動取得 (ブラウザ側処理)
- 新機能: デスクトップでのズーム対応 — ダブルクリックまたは Ctrl + スクロールでズーム、ドラッグでパン
1.0.1
- 修正: 同じ名前のグループが別々のグループとして扱われるように 優先度: 低
- 改善: モバイル横向き時のライトボックスレイアウト (ボタン位置、画像サイズ) 優先度: 低
- 改善: 設定ページ — セクション見出し、グループ化の説明を追加し、コントロールテーブルを再設計 優先度: 低
1.0
- 初回リリース