![](https://cxg-design.jp/wp-content/uploads/2024/04/33b2c1350f0e7a71d72a09c0794420eb.png)
Modula PROで、サムネイル付ライトボックスを作成
前回はModula PROで、ホバーアクションのあるギャラリーを作成しました。今回は、ライトボックスにサムネイルを表示する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
今回のDEMOは、縦サムネイル、横サムネイル、2種類作成しました。今回もフランス旅行の写真を使用しました。
縦サムネイルでは、PCでは2列、SPでは1列で表示されます。縦サムネイルはフェード、横サムネイルは拡大縮小のエフェクトをライトボックスに設定しています。
General
![](https://cxg-design.jp/wp-content/uploads/2024/04/a573eba15e22c078f41b05a80d8d21f9.png)
前回と同じ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
![](https://cxg-design.jp/wp-content/uploads/2024/04/75361a7d4e563c7957771c439bc8485f.png)
まず、サムネイルを有効化するために、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
![](https://cxg-design.jp/wp-content/uploads/2024/04/e87c8924719516c75622469a1cddada2.png)
タイトルのみ表示します。タイトルの色は白(#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
![](https://cxg-design.jp/wp-content/uploads/2024/04/c0a902a92631d27728c2f137b6cce8b5.png)
縦サムネイルは、27. Milo、横サムネイルは、36. Jazzに設定しました。Hover Opacityは、共に0に設定しました。
項目 | 設定値 |
---|---|
Hover Opacity | 0 |
Hover effect | 縦サムネイル:27. Milo 横サムネイル:36. Jazz |
以上で、今回の説明は終了です。サムネイルが表示されるとライトボックスの印象が変わりますね。また、今回のDEMOは矢印を表示していないので、写真の上に何も乗らないので、綺麗に見えます。
ライトボックスの設定項目Lightbox & Linksは、項目が多くて複雑ですが、UIの設定もできるので、サイトに合わせてデザインを変更できます。
Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。