Smart Slider Proで、ライトボックススライダーを作成

Smart Slider 3 Proでは、スライダーに色々なアニメーションを付けたり、レスポンシブ対応のカルーセルを作成できたり出来ます。今回は、画像をクリックするとライトボックスでスライダーが表示される方法を紹介します。

今回のDEMOは、ピクトグラムギャラリーです。

ブロックエディターの3カラムでギャラリーを作成しています。画像をクリックすると、スライダーがライトボックスで表示されます。色違い（白バック、黒バック）のピクトグラムを矢印で切り替えて見ることが出来ます。

画像

まず、画像を作成します。今回用意するのは、1つのピクトグラムに対し、サムネイル用の＋マークが右下についた画像、白バック、黒バックの3点です。サムネイルはレイアウトによって白バック、黒バック分かれています。

スライダー作成

Smart Slider 3 Proでライトボックススライダーを作成します。

Smart Slider＞Create Slider＞Create a New Projectをクリックします。Project Typeをブロックにします。任意の名前を入力し、横800px、高さ800px、レイアウトBoxedに設定し、作成ボタンをクリックします。

スライドを追加＞画像をクリックし、サムネイル画像を選択します。

サムネイル画像をクリックし編集画面に移行します。スライド＞コンテンツ＞リンクの＋をクリックします。Light Box＞Content List – One Per Lineの画像選択をクリックします。メディアギャラリーからスライダーで表示したい順にクリックします。SUNGLASSは、白バックサムネイルなので、白バック、黒バックの順にクリックし選択ボタンをクリックします。

Content List – One Per Lineに画像名がスライダー順で表示されます。OKなら挿入ボタンをクリックします。右上の保存ボタンをクリックして完成です。

他の8つのスライダーも同じように作成します。

設置

スライダー作成時と同じようにショートコードで設置します。今回は、3カラムにショートコードを挿入しました。

3カラムにショートコードを挿入

以上で、今回の説明は終了です。通常、ギャラリーのライトボックスは表示している画像になりますが、今回のDEMOの場合、それぞれ違うライトボックスが表示出来ます。また、ページに全てのカラーを表示しなくていいので、ギャラリーをコンパクトに使用できるのも魅力です。