![](https://cxg-design.jp/wp-content/uploads/2024/04/mariafilter2.png)
Modula PROで、フィルター付きのギャラリーを作成
前回のBLOGでは、Modula PROで、サムネイル付ライトボックスを作成しました。今回は、画像をフィルターで絞ることができるギャラリーを作成します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
今回のDEMOも、フランス旅行の写真を使用しています。
ルーブル美術館、モンサンミッシェル、ベルサイユ宮殿、ルーアン大聖堂の4つのカテゴリーで分けています。それぞれのボタンを押すと、カテゴリー分けした画像でソートされます。
General
![](https://cxg-design.jp/wp-content/uploads/2024/04/10bae8f4221374d0b4b281727d4800a1.png)
今回も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
![](https://cxg-design.jp/wp-content/uploads/2024/04/52e145ed9c0e65fa13a8200f64576122.png)
ほぼ、デフォルト設定です。ライトボックスで、画像をループしたいので、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
![](https://cxg-design.jp/wp-content/uploads/2024/04/4324e7869d81e42536fa68105fcb1184.png)
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
![](https://cxg-design.jp/wp-content/uploads/2024/04/e08bf47706afaa37692ca1fc7b153672.png)
今回は、タイトルを表示していないので、画像のエフェクトのみ有効になります。また、カーソルを合わせた時、画像を透過させないようにHover Opacityを0に設定しました。
項目 | 設定値 |
---|---|
Hover Opacity | 0 |
Hover effect | 28. Julia |
フィルター指定
![](https://cxg-design.jp/wp-content/uploads/2024/04/5359e93d126fe4936730a339ac7aa89f.png)
最後に、画像に対して、フィルターを指定していきます。
画像にカーソルを合わせ、鉛筆マークをクリックします。Filters項目のセレクトボックスから、設定したいフィルターを選択します。Save & Closeボタンをクリックします。同じように全ての画像にフィルターを割り当てます。これで、全ての設定が完了です。
フォルター名変更時の注意点
画像のフィルターを設定した後、Filters設定で、Filtersの名前を変更した場合、画像のフィルターが解除されます。その場合、もう一度画像のフィルターを指定し直します。
一方、フィルター画像の入れ替えボタンをクリックして、画像を変更した場合は、フィルター指定は解除されません。
ギャラリー読み込みスピード
今回のDEMOは、画像を22枚使用してギャラリーを作成しました。枚数が増えるほど読み込みが遅くなります。実装する場合は、画像サイズを縮小したり、ページに他のコンテンツを入れないなどの対策をしましょう。
以上で今回の説明は終了です。設定が簡単なので、気軽に更新できますね。フィルターのデザインも色々あり、色も変更できるので、Webサイトに合わせて、デザインすることができます。