Modula PROで、フィルター付きのギャラリーを作成
前回のBLOGでは、Modula PROで、サムネイル付ライトボックスを作成しました。今回は、画像をフィルターで絞ることができるギャラリーを作成します。
出典 : Modula Image Gallery
今回の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ボタンをクリックします。同じように全ての画像にフィルターを割り当てます。これで、全ての設定が完了です。
フォルター名変更時の注意点
画像のフィルターを設定した後、Filters設定で、Filtersの名前を変更した場合、画像のフィルターが解除されます。その場合、もう一度画像のフィルターを指定し直します。
一方、フィルター画像の入れ替えボタンをクリックして、画像を変更した場合は、フィルター指定は解除されません。
ギャラリー読み込みスピード
今回のDEMOは、画像を22枚使用してギャラリーを作成しました。枚数が増えるほど読み込みが遅くなります。実装する場合は、画像サイズを縮小したり、ページに他のコンテンツを入れないなどの対策をしましょう。
以上で今回の説明は終了です。設定が簡単なので、気軽に更新できますね。フィルターのデザインも色々あり、色も変更できるので、Webサイトに合わせて、デザインすることができます。
