![](https://cxg-design.jp/wp-content/uploads/2024/04/5143ad401232d2be9030e68e1b0520fd.png)
Modula PROで、無限スクロールギャラリーを作成
BLOGでは、Modula PROで作成できる、色々な演出のギャラリーを紹介しました。今回は、Modula PROで、無限スクロールギャラリーを作成します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
今回のDEMOは、今まで紹介しきれなかったフランス旅行の写真をギャラリーにしました。
60枚の画像を、15枚ずつ4回に分けて表示します。SP、PC共にスクロールで表示していき、15枚表示が終了したら、次の15枚が読み込まれます。
General
![](https://cxg-design.jp/wp-content/uploads/2024/04/e484b21dec4abdaef7636e2a6b4b0e3e.png)
今回は、Createve Galleryで作成しました。Heightは、15枚で表示するギャラリーの高さになります。
無限スクロールの設定をしていきます。まず、Enable pagenationにチェックを入れます。次に、表示されたEnable infinite scrollにチェックを入れます。Image / Page (Load)に1回のロードで読み込む枚数、15を設定します。これで、無限ループの設定は終了です。
項目 | 設定値 |
---|---|
Gallery Type | Creative Gallery |
Gutter | 0 |
Width | 100% |
Image Size | Medium |
Height | PC:2000px タブレット:2000px SP:2000px |
Random factor | 50 |
Shuffle images | チェック無 |
Enable pagenation | チェック有 |
Enable infinite scroll | チェック有 |
Image / Page (Load) | 15 |
ページネーション有効時のShuffle images
Shuffle imagesを有効にすると、画像の順番が、ページを読み込むごとに変化します。しかし、Enable pagenationにチェックを入れ、Image / Page (Load)を指定すると、ページごとに画像の順番が入れ替わります。画像全体での入れ替えはできません。今回のDEMOでは、有効にしていません。
Lightbox & Links
![](https://cxg-design.jp/wp-content/uploads/2024/04/f6f366c4cd2fe1c4885b3c88b24318be.png)
Loop navigationにチェックを入れて、ライトボックスで、画像、動画がループで表示されるようにします。Keyboard navigation、Allow swipingにチェックを入れて、PCでは、キーボード、SPではスワイプでも、画像、動画の切り替えができるようにします。
項目 | 設定値 |
---|---|
Navigation arrows | チェック有 |
Loop navigation | チェック有 |
Show image title | チェック有 |
Show image caption | チェック無 |
Keyboard navigation | チェック有 |
Mousewheel navigation | チェック無 |
Tool bar | チェック有 |
Close button | チェック有 |
Close on slide click | チェック有 |
Open / Close animation | None |
Transition effect | None |
Allow swiping | チェック有 |
Infobar | チェック有 |
Auto start thumbnails | チェック無 |
Lightbox background color | rgba(30,30,30,0.9) |
Caption
![](https://cxg-design.jp/wp-content/uploads/2024/04/6d1c8a9c1047f47d9e9f99fc2504769b.png)
今回は、写真を見せるため、サムネイルにはタイトルを表示していません。
項目 | 設定値 |
---|---|
Show Gallery Title | チェック無 |
Hide Title | チェック有 |
Hide Caption | チェック有 |
Hover effects
![](https://cxg-design.jp/wp-content/uploads/2024/04/9721844f066c273221eb1a874daaa16d.png)
31. Selenaを指定し、マウスオーバーすると、画像が縮小します。
項目 | 設定値 |
---|---|
Hover Opacity | 0 |
Hover effect | 31. Selena |
以上で今回の説明は終了です。無限スクロールは、ギャラリー写真を多く見せたい時に有効な機能です。また、Modula PROのページネーションでは、ページャーを表示して、ページ毎に画像を表示することも出来、デザインに合わせて使い分けれます。