Modula PROで、フルスクリーンスライドショーを作成
Modula PROで、色々な機能を紹介してきましたが、今回は、フルスクリーンのスライドショーを作成します。また、今まで紹介しきれなかったページネーション、スタイル設定、ローディングアニメーションも合わせて説明します。
出典 : Modula Image Gallery
今回は、残りのフランス旅行の写真で、ギャラリーを作成しました。
ロードで画像が回転しながら表示されます。ページネーションが表示されます。ライトボックスの右上のバーにフルスクリーンボタンが表示されます。オートプレイで、スライドショーが再生されます。
General
Creative Galleryで作成しました。PC、SP共に1画面で見えるようなサイズにしました。ページネーションを実装するため、Enable pagenationにチェックを入れ、Images / Page ( Load )を10にしました。
| 項目 | 設定値 |
|---|---|
| Gallery Type | Creative Gallery |
| Gutter | 10 |
| Width | 100% |
| Image Size | Medium |
| Height | PC : 800px タブレット : 800px SP : 700px |
| Random factor | 50 |
| Shuffle images | チェック有 |
| Enable pagenation | チェック有 |
| Images / Page ( Load ) | 10 |
Lightbox & Links
まず、フルスクリーンボタンを表示するために、Fullscreen buttonにチェックを入れます。アニメーションをスライドにするため、Transition effectをSlideに設定しました。
ページャーのデザイン
ページャーのデザインは、Webサイトデフォルトの設定が実装されます。ページャーについてModulaの設定項目がありますが、今回はデフォルトのままにしています。
| 項目 | 設定値 |
|---|---|
| Navigation arrows | チェック有 |
| Loop navigation | チェック有 |
| Show image title | チェック無 |
| Show image caption | チェック無 |
| Keyboard navigation | チェック有 |
| Mousewheel navigation | チェック無 |
| Tool bar | チェック有 |
| Close button | チェック有 |
| Fullscreen button | チェック有 |
| Close on slide click | チェック有 |
| Open / Close animation | None |
| Transition effect | Slide |
| Transition speed | 500 |
| Allow swiping | チェック有 |
| Infobar | チェック有 |
| Auto start thumbnails | チェック無 |
| Lightbox background color | rgba(30,30,30,0.9) |
Captions
タイトルのみ表示します。
| 項目 | 設定値 |
|---|---|
| Show Gallery Title | チェック無 |
| Hide Title | チェック無 |
| Title Color | #ffffff |
| Title Font Size | 18px |
| Mobile Title Font Size | 15px |
| Title Font | Default |
| Title Font Weight | Regular |
| Hide Caption | チェック有 |
Loading effects
画像を回転しながら表示させるため、Rotateを45に設定しました。
| 項目 | 設定値 |
|---|---|
| Rotate | 45 |
| Load in view | チェック無 |
Hover effects
タイトルが、中央に表示され、マウスオーバーすると菱形が表示される、29.Heraを設定しました。
| 項目 | 設定値 |
|---|---|
| Hover Opacity | 0 |
| Hover effect | 29. Hera |
Style
角丸にするため、Border Radiusを10に設定しました。
| 項目 | 設定値 |
|---|---|
| Border Size | 0 |
| Border Radius | 10 |
Slideshow
スライドショーを有効にするために、Enable Slideshowにチェックを入れます。ライトボックスになったら、自動でスライドショーが始まるように、Enable Slideshow Autoplayにチェックを入れます。3秒で画像が切り替わるように、Time between slidesを3000に設定しました。
| 項目 | 設定値 |
|---|---|
| Enable Slideshow | チェック有 |
| Enable Slideshow Autoplay | チェック有 |
| Time between slides | 3000 |
以上で今回の説明は終了です。オートプレイやフルスクリーンなど、細かなUIを設定できるのがPRO版の魅力です。BLOGでは、Modula PROの使用方法に関する記事を書いてきました。一通りの説明は完了しましたが、また、新たな設定を見つけたら紹介していきたいと思います。
