Modula PROで、サムネイル付ライトボックスを作成

前回はModula PROで、ホバーアクションのあるギャラリーを作成しました。今回は、ライトボックスにサムネイルを表示する方法を紹介します。

今回のDEMOは、縦サムネイル、横サムネイル、2種類作成しました。今回もフランス旅行の写真を使用しました。

縦サムネイルでは、PCでは2列、SPでは1列で表示されます。縦サムネイルはフェード、横サムネイルは拡大縮小のエフェクトをライトボックスに設定しています。

General

前回と同じCustom Gridでギャラリーを作成しました。縦サムネイル、横サムネイル同じ設定になります。

項目	設定値
Gallery Type	Creative Gallery
Gutter	0
Width	100%
Image Size	Medium
Height	PC : 1000px タブレット : 1000px SP : 1500px
Random factor	50
Shuffle images	チェック有

Lightbox & Links

まず、サムネイルを有効化するために、Auto start thumbnailsにチェックを入れます。これによりライトボックスを開くと、最初からサムネイルが表示されます。

次に縦サムネイル、横サムネイルで、デザインを分けます。横サムネイルは、Thumbnails at bottomにチェックを入れ、Thumb axisをHorizontal scrollingに変更します。縦サムネイルは、どちらの設定もデフォルトのままです。これで、サムネイルの基本的な設定は終了です。残りの設定で細かいデザインを設定していきます。

ライトボックスを開く時と、画像が入れ替わる時のアニメーションを縦サムネイル、横サムネイルで変えました。縦サムネイルは、フェードにするため、Open/Close animation、Transition effectを共にFadeに設定しました。横サムネイルは、拡大縮小するアニメーションにするため、Open/Close animation、Transition effectを共にZoom-in-outに設定しました。

ライトボックスの背景色も、縦サムネイル、横サムネイルで変更しました。縦サムネイルでは、白バックのデザインにしたいので、Lightbox background colorをrgba(255,255,255,0.9)に設定しました。横サムネイルは、デフォルトのままダークグレーにしています。

有効状態のサムネイルには、枠線が表示されます。縦サムネイル、横サムネイル共に、色を白の透過0.5にするため、Lightbox active colorをrgba(255,255,255,0.5)に変更しました。

項目	設定値
Open / Close animation	縦サムネイル：Fade 横サムネイル：Zoom-in-out
Open / Close animation speed	500
Transition effect	縦サムネイル：Fade 横サムネイル：Zoom-in-out
Transition speed	500
Auto start thumbnails	チェック有
Thumb axis	縦サムネイル：Vertical scrolling 横サムネイル：Horizontal scrolling
Thumbnails at bottom	縦サムネイル：チェック無 横サムネイル：チェック有
Lightbox background color	縦サムネイル：rgba(255,255,255,0.9) 横サムネイル：rgba(30,30,30,0.9)
Lightbox active color	rgba(255,255,255,0.5)

その他の設定です。

今回は、矢印を取るため、Navigation arrowのチェックを外しました。その代わり、スワイプやマウスホイールでも、ライトボックスの写真変更ができるようにするため、Mousewhoeel navigation、Allow swipingにチェックを入れました。

また、サムネイルボタンを設置し、表示非表示を切り替えできるようにするため、Thumbnails buttonにチェックを入れましました。

項目	設定値
Navigation arrows	チェック無
Loop navigation	チェック有
Show image title	チェック有
Title & caption position	Left
Mousewhoeel navigation	チェック有
Tool bar	チェック有
Close button	チェック有
Thumbnails button	チェック有
Close on slide click	チェック有
Allow swiping	チェック有

Captions

タイトルのみ表示します。タイトルの色は白(#ffffff)、フォントはデフォルトに設定しました。縦サムネイル、横サムネイル同じ設定になります。

項目	設定値
Show Gallery Title	チェック無
Hide Title	チェック無
Title Color	#ffffff
Title Font Size	20px
Mobile Title Font Size	15px
Title Font	Default
Title Font Weight	Regular
Hide Caption	チェック有

Hover effects

縦サムネイルは、27. Milo、横サムネイルは、36. Jazzに設定しました。Hover Opacityは、共に0に設定しました。

項目	設定値
Hover Opacity	0
Hover effect	縦サムネイル：27. Milo 横サムネイル：36. Jazz

以上で、今回の説明は終了です。サムネイルが表示されるとライトボックスの印象が変わりますね。また、今回のDEMOは矢印を表示していないので、写真の上に何も乗らないので、綺麗に見えます。

ライトボックスの設定項目Lightbox & Linksは、項目が多くて複雑ですが、UIの設定もできるので、サイトに合わせてデザインを変更できます。

Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。