![](https://cxg-design.jp/wp-content/uploads/2024/04/modulaotherbanner.png)
Modula PROで、フルスクリーンスライドショーを作成
Modula PROで、色々な機能を紹介してきましたが、今回は、フルスクリーンのスライドショーを作成します。また、今まで紹介しきれなかったページネーション、スタイル設定、ローディングアニメーションも合わせて説明します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
今回は、残りのフランス旅行の写真で、ギャラリーを作成しました。
ロードで画像が回転しながら表示されます。ページネーションが表示されます。ライトボックスの右上のバーにフルスクリーンボタンが表示されます。オートプレイで、スライドショーが再生されます。
General
![](https://cxg-design.jp/wp-content/uploads/2024/04/612d8b91670039081a6de23f228f153a.png)
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
![](https://cxg-design.jp/wp-content/uploads/2024/04/85f6154d0e1ae81f445b1e6d06b9e47e.png)
まず、フルスクリーンボタンを表示するために、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
![](https://cxg-design.jp/wp-content/uploads/2024/04/fa354361b3f38d84e4d421bf5864a053.png)
タイトルのみ表示します。
項目 | 設定値 |
---|---|
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
![](https://cxg-design.jp/wp-content/uploads/2024/04/0ce9afdd9bd36ce0b3582310c2554f15.png)
画像を回転しながら表示させるため、Rotateを45に設定しました。
項目 | 設定値 |
---|---|
Rotate | 45 |
Load in view | チェック無 |
Hover effects
![](https://cxg-design.jp/wp-content/uploads/2024/04/4ee7c428c3da7aeea7fcad874f9db6a3.png)
タイトルが、中央に表示され、マウスオーバーすると菱形が表示される、29.Heraを設定しました。
項目 | 設定値 |
---|---|
Hover Opacity | 0 |
Hover effect | 29. Hera |
Style
![](https://cxg-design.jp/wp-content/uploads/2024/04/b5ce1e9a2f891169680fff7c61447af6.png)
角丸にするため、Border Radiusを10に設定しました。
項目 | 設定値 |
---|---|
Border Size | 0 |
Border Radius | 10 |
Slideshow
![](https://cxg-design.jp/wp-content/uploads/2024/04/bb8073208584182403c10a9bdc139fa8.png)
スライドショーを有効にするために、Enable Slideshowにチェックを入れます。ライトボックスになったら、自動でスライドショーが始まるように、Enable Slideshow Autoplayにチェックを入れます。3秒で画像が切り替わるように、Time between slidesを3000に設定しました。
項目 | 設定値 |
---|---|
Enable Slideshow | チェック有 |
Enable Slideshow Autoplay | チェック有 |
Time between slides | 3000 |
以上で今回の説明は終了です。オートプレイやフルスクリーンなど、細かなUIを設定できるのがPRO版の魅力です。BLOGでは、Modula PROの使用方法に関する記事を書いてきました。一通りの説明は完了しましたが、また、新たな設定を見つけたら紹介していきたいと思います。