Modula PROで、フィルター付きのギャラリーを作成

前回のBLOGでは、Modula PROで、サムネイル付ライトボックスを作成しました。今回は、画像をフィルターで絞ることができるギャラリーを作成します。

今回のDEMOも、フランス旅行の写真を使用しています。

ルーブル美術館、モンサンミッシェル、ベルサイユ宮殿、ルーアン大聖堂の4つのカテゴリーで分けています。それぞれのボタンを押すと、カテゴリー分けした画像でソートされます。

General

今回もCreative Galleryで作成しました。ギャラリーの上にボタンが設置されるので、高さを前回より低くしています。SPでは、ボタンが改行されるので、そこも計算した値にします。

項目	設定値
Gallery Type	Creative Gallery
Gutter	0
Width	100%
Image Size	Medium
Height	PC : 800px タブレット :800px SP : 650px
Random factor	50
Shuffle images	チェック無

Lightbox & Links

ほぼ、デフォルト設定です。ライトボックスで、画像をループしたいので、Loop navigationにチェックを入れました。また、SPでフリップで画像を変更できるようにしたいので、Allow swipingにチェックを入れました。

項目	設定値
Navigation arrows	チェック有
Loop navigation	チェック有
Show image title	チェック有
Tool bar	チェック有
Close button	チェック有
Close on slide click	チェック有
Open / Close animation	None
Transition effect	None
Allow swiping	チェック有
Infobar	チェック有
Lightbox background color	rgba(30,30,30,0.9)

Filters

Filtersに設置したいカテゴリー名を入力します。+ Add new filterをクリックし、新しいテキストボックスが作成されるので、設置したいフィルターを作成します。

Filter link styleから、フィルターのデザインを選択します。Filter link colorで、通常の色の設定をします。Filters link hover colorで有効化しているボタンの色の設定をします。Filter positionで、フィルターの位置を指定します。

項目	設定値
Dropdown Filters	チェック無
Filter link style	Maria
Filter link color	rgba(0,0,0,1)
Filter link color hover	rgba(204,36,156,0.9)
Filter position	Top
Filter Text Align	Center
Collapsible Filters	チェック無
Mobile Dropdown Filters	チェック無

Hover effects

今回は、タイトルを表示していないので、画像のエフェクトのみ有効になります。また、カーソルを合わせた時、画像を透過させないようにHover Opacityを0に設定しました。

項目	設定値
Hover Opacity	0
Hover effect	28. Julia

フィルター指定　

最後に、画像に対して、フィルターを指定していきます。

画像にカーソルを合わせ、鉛筆マークをクリックします。Filters項目のセレクトボックスから、設定したいフィルターを選択します。Save & Closeボタンをクリックします。同じように全ての画像にフィルターを割り当てます。これで、全ての設定が完了です。

以上で今回の説明は終了です。設定が簡単なので、気軽に更新できますね。フィルターのデザインも色々あり、色も変更できるので、Webサイトに合わせて、デザインすることができます。