WordPress
【WordPress】レスポンシブライトボックスプラグインVenoBox Lightbox
November 11, 2016
VenoBox LightboxはリンクにVenoBoxライトボックスを追加するプラグイン。レスポンシブ対応で、VimeoやYouTubeなどの動画、画像、ギャラリー、IFRAME、インラインコンテンツを表示します。
VenoBox Lightboxプラグインを導入
ダッシュボード >> プラグイン >> 新規追加 >>
有効化にすると設定にVenoBox Lightboxが追加されます。
VenoBox Lightbox
| Add All Linked Images To LightBox | すべてのリンク付き画像にライトボックスを追加 |
|---|---|
| Display Previous/Next Icons | 前/次のアイコンを追加します。 |
| Choose which Title text to use in LightBox | 使用するタイトルテキストを選択 |
| Display Pagination | ページネーション表示 |
| Infinite Gallery | ライトボックスモードでページ上の項目を連続する無限ギャラリーを追加 |
| Default Overlay Background | オーバーレイの背景 |
| Default Inline Background Color | インラインの背景色 |
| Frame Border Width – Images | フレームボーダー幅 |
| Frame Border Color – Images | フレーム境界線の色 |
| Add YouTube and Vimeo videos To LightBox | ライトボックスにYouTubeやVimeoの動画を追加 |
マークアップ
上記の設定では全てのリンク付き画像にVenoBox Lightboxが適用されますが、下記のようにリンクにclass="venobox"を追加する方法でも使用可能。
<a class="venobox" data-type="vimeo" href="https://vimeo.com/1084537"><img src="..." /></a>
オートプレイ
オートプレイを可能。
data-autoplay="true"
オーバレイ
オーバレイの色を任意のものに変更
data-overlay="rgba(95,164,255,0.8)"
data-overlay="#ca294b"
ギャラリー
data-gall="myGallery"
