Modula PROで、フルスクリーンスライドショーを作成

Modula PROで、色々な機能を紹介してきましたが、今回は、フルスクリーンのスライドショーを作成します。また、今まで紹介しきれなかったページネーション、スタイル設定、ローディングアニメーションも合わせて説明します。

今回は、残りのフランス旅行の写真で、ギャラリーを作成しました。

ロードで画像が回転しながら表示されます。ページネーションが表示されます。ライトボックスの右上のバーにフルスクリーンボタンが表示されます。オートプレイで、スライドショーが再生されます。

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に設定しました。

項目	設定値
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の使用方法に関する記事を書いてきました。一通りの説明は完了しましたが、また、新たな設定を見つけたら紹介していきたいと思います。