テーマオプション Lightbox

このコンテンツでは、【テーマオプション Lightbox】全17のオプションについて解説をしています。

Lightboxは、ページを移動することなく画像の拡大表示やスライドショーを表示することができる機能です。

当サイトでは主に画像の拡大に利用しています。
ページ内に表示している画像は400～500px程度にしておき、Lightboxで表示する画像を1000px程度にしています。拡大↔戻るといった操作性もいいので、現在では多くのサイトで使用されています。

Avadaでは、多機能なiLightBoxをベースにしたLightboxを使用することができます。

このオプションを有効にすると、テーマ全体でLightboxを使用することができます。

また、このオプションを有効にすることで、追加のLightboxオプションが表示されます。

このオプションを有効にすると、投稿ページとポートフォリオページのアイキャッチ画像をLightboxで表示することができます。

このサイトでは無効にしているので、アイキャッチ画像はクリックできません（Lightboxで表示しない）。

このオプションは、関連投稿やポートフォリオのLightbox表示を単体にするかグループにするかを選択します。

1. First featured image of every post（投稿毎の最初のアイキャッチ画像・グループ）
2. Only featured images of individual post（該当記事のアイキャッチ画像のみ・単体）

関連投稿やポートフォリオでは、アイキャッチ画像をマウスホバーすると虫眼鏡アイコンが出てきて、このアイコンをクリックするとアイキャッチ画像がLightboxで表示できます。この時に、クリックした記事のアイキャッチ画像のみを表示させたい場合は2を選択します。

関連している記事や同じカテゴリーに属しているポートフォリオをまとめて表示したい場合は1を選択します。なお、この時に1つの投稿に複数のアイキャッチ画像を設定している場合は、1枚目（最初）のアイキャッチ画像のみ表示されます。

当サイトは1を選択していますので、Portfolio GridのIllustrationsを選択しアイコンからLightbox表示をすると、Illustrationsに属している1枚目のアイキャッチ画像計5枚のサムネイルがグループとして下側に表示されます。

このオプションは、Lightboxのスキンデザインを以下の7種類から選択します。

1. Light
2. Dark
3. Mac
4. Metro Black
5. Metro White
6. Parade
7. Smooth

当サイトでは、3のMacを使用しています。

スライドが複数ある場合にサムネイルが表示されますが、このオプションはその位置を下または右から選択します。

このオプションは、Lightboxに切り替わる際のアニメーション速度を設定します。

Fast=瞬時に切り替わる、Slow=ふわっと切り替わる、Normal=FastとSlowの中間となります。

当サイトの設定はSlowです。

このオプションを有効にすると、Lightbox内で表示するアイテム（スライド）が複数ある場合の切り替え矢印を表示します。

矢印のデザインは、【4.Lightbox Skin / Lightboxのスキン】で選択したスキンによって変わります。また、【5.Thumbnails Position / サムネイルの位置】オプションで、下を選択すると矢印は左右となり、右を選択すると矢印は上下に表示されます。

なお、このオプションをオフにしても、マウスホイールで次の画像へ切り替えたり（デスクトップ版のみ）、サムネイルをクリックまたはタップすれば該当の画像に切り替わります。

このオプションを有効にすると、Lightboxに再生・停止ボタンを表示します。再生ボタンをクリックすると【10.Slideshow Speed / スライドショーのスピード】で設定するスピードでスライドショーがスタートします。また、再生中は停止ボタン、停止中は再生ボタンが表示されます。

画像の再生・停止ボタン左側にあるボタンは、『×』はLightboxを閉じるボタン、『斜め矢印』はフルスクリーンで表示ボタンとなっています。ボタンのデザインは選択しているスキンによって変わります。

このオプションを有効にすると、Lightboxで画像を表示した際に、スライドが複数あるとスライドショーが自動再生されます。

このオプションは、【8.Gallery Start・Stop Button / ボタンの表示】でボタンを表示し再生した場合や【9.Autoplay the Lightbox Gallery / ギャラリーの自動再生】を有効にした場合のスライドショーの切り替え速度をミリ秒で設定します。

1000=1秒なので、5秒表示させたい場合は5000を設定します。

このオプションは、Lightboxと背景の間の透明度を設定します。

0～1で選択できます。
0に近づくほど透明になります。

このオプションを有効にすると、画像のタイトルが表示されます。

このオプションを有効にすると、画像のキャプションが表示されます。

このオプションを有効にすると、Lightboxの画像にマウスホバーした際にFacebookなどのSNSアイコンが表示されます。

このオプションを有効にすると、URLの末尾に#iLightbox[ギャラリー名]/番号が挿入され、画像をディープリンクさせLightboxで表示させることができるようになります。

ディープリンクとは?

あるウェブページから他のウェブサイトのトップページ以外の各コンテンツ（ウェブページ・画像等）に直接ハイパーリンクを張ること。wikiより

例として以下のURLをコピーしブラウザのURL欄に貼り付けると、次のセクションで使用している画像がLightboxで表示されます。
https://www.piconano.biz/avada/theme-options/lightbox#iLightbox[Deeplinking_Test]/0

このオプションを有効にすると、WordPressのデフォルトテキストエディタのAdd Mediaから直接画像を挿入し、『添付ファイルの表示設定』をメディアファイルにしていると、Lightboxでそれらを表示することができます。（WordPressの他のLightboxプラグインも同様です）

ただし、Avadaには画像の細かい設定ができる【Image Frame】というエレメントがあり、その中の設定でLightbox表示のオン・オフが行えるため、当サイトのように画像の表示に【Image Frame】を使う場合は意味のない設定（上書きされる）となります。

サイト運営の途中からAvadaを導入した場合などに有効にするといいでしょう。

このオプションは、YouTubeやVimeoの動画をLightboxで表示する際の幅と高さを設定します。

下の画像をクリックするとLightboxでVimeo動画が表示されますが、その動画の表示サイズの設定になります。