Modula PROで、無限スクロールギャラリーを作成
BLOGでは、Modula PROで作成できる、色々な演出のギャラリーを紹介しました。今回は、Modula PROで、無限スクロールギャラリーを作成します。
出典 : Modula Image Gallery
今回のDEMOは、今まで紹介しきれなかったフランス旅行の写真をギャラリーにしました。
60枚の画像を、15枚ずつ4回に分けて表示します。SP、PC共にスクロールで表示していき、15枚表示が終了したら、次の15枚が読み込まれます。
General
今回は、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
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
今回は、写真を見せるため、サムネイルにはタイトルを表示していません。
| 項目 | 設定値 |
|---|---|
| Show Gallery Title | チェック無 |
| Hide Title | チェック有 |
| Hide Caption | チェック有 |
Hover effects
31. Selenaを指定し、マウスオーバーすると、画像が縮小します。
| 項目 | 設定値 |
|---|---|
| Hover Opacity | 0 |
| Hover effect | 31. Selena |
以上で今回の説明は終了です。無限スクロールは、ギャラリー写真を多く見せたい時に有効な機能です。また、Modula PROのページネーションでは、ページャーを表示して、ページ毎に画像を表示することも出来、デザインに合わせて使い分けれます。
