僕はSANGOのテーマを使い始めてからずっと気になっていたことがありました。
それは、モーダルウインドウの機能がないという事。。
実は僕の書く記事の中でWEBデザインカテゴリがあるのですが、デザインの画像を載せようとしても縦に長い画像が多いので、ページが間延びしてしまいどうしても複数画像を載せることができなかったのです。。
そんな悩みをモーダルウインドウのプラグインで簡単に解決できたので紹介しますね。
Responsive Lightbox & Galleryを使う
今回は「Responsive Lightbox & Gallery」というプラグインを使って見ました。
このプラグインを使うメリットは設定の手軽さとモーダルの設定を複数指定できる事です。
もちろんレスポンシブ対応ですよ！
まずは設定まで手順です！
設定方法
モーダル時に違う画像を表示させたい場合
- 添付ファイルの表示設定を「カスタムURL」にします。
- 「カスタムURL」に表示させたい画像のパス（URL）を指定する。
どうでしょう。
めちゃくちゃ簡単ですよね！この手軽さが売りでございます！
モーダルの種類を選択できる
モダールの機能も８種類の設定から好みの見せ方を選択することができます。
管理画面のサイドバーに「Lightbox」という項目が表示されているので、その中のGeneralという項目を選択して、機能を設定してください。
種類は下記です。
[list class=”ol-circle li-accentbdr acc-bc-before”]
- SwipeBox
- prettyPhoto
- FancyBox
- Nivo Lightbox
- Image Lightbox
- TosRUs
- Featherlight
- Magnific Popup
[/list]
どれを選ぶのかは個人の好みにもよりますが、機能性が若干異なるのでまずはいろいろ試してみてください。
いくつか例を紹介すると、
prettyPhoto
画像の拡大ができます。
FancyBox
背景のオーバレイが薄いグレーになります。
背景を押すとモーダルは閉じます。
Nivo-Lightbox
濃いめのオーバレイ。
背景を押すと閉じる。
このように複数のモーダルウインドウの中から一つを選択してください。
どれも有名なモーダル系Jqueryプラグインを使っていて、アニメーションのスピードや画像幅の指定など、細かいところまで設定可能ですよ！
画像ギャラリーも設定可能
サムネイルを並べて画像ギャラリーも設定可能です。
モーダルウインドウ内で画像ギャラリーを閲覧させたいときに便利です。
[box class=”box30″ title=”ギャラリー例”]
[/box]
ギャラリーも数パターン設定可能なのでいろいろ試してみてください。
個人的にはモーダル内でサムネイル選択ができるTosRUsの設定もありかなと思っています。
まとめ
いかがでしたでしょうか。
モーダルウインドウが使えるようになると表現の幅がぐっと広がってきますよ。
とくに自分の作品を複数紹介しているブログとかは重宝するかなと思っています。
僕は下記のページでモーダルを使ってみました。
[card id=”1834″]
画像だけでなくモーダル内でyoutube動画を再生させるkともできたりと、使用用途は様々です。
レスポンシブなのでスマホ表示も心配なし！！
気になった人は是非一度試してみてくださいね～！
コメント