Staff Blog
スタッフブログ

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly

カスタマイズいっぱい、モーダルウィンドウ「Magnific Popup」を使ってみた。

min

最近、いろいろなモーダルウィンドウがありますが、最近はよく「Magnific Popup」を使っています。状況によっては、「colorBox」「FancyBox」も使いますが最近は、MagnificPopupを使うことがおおいです。
そして、WordPressのPluginもあるようなので、簡単にそっちでも使えるのかも。。

モーダルウィンドウとは

さて、モーダルウィンドウとなんか、知ったかぶりの人みたい最近よくいいますが、そもそもモーダルウィンドウってなによ!ってことに気がついた。ってなわけで

タララタッタラーン!ウィキペディアー(ドラ◯もん風)

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、緊急の状態を知らせる目的でよく使われる。

まぁ、ウィンドウから子ウィンドウを生成してユーザーに特に見てほしい対応してほしいことを強調して見せてなんか操作してくれないと親ウィンドウには戻れませんよ!的なことでしょうか。そういうことなんでしょうね。

その他のモーダルなんちゃら

上でも言っている通り、モーダルウィンドウはMagnificPopup以外にもcolorBox、FancyBoxなど、まだまだいっぱいあります。

では、そのいっぱいあるので代表的なものを紹介したいと思います。

ベーシックな

Lightbox2
http://lokeshdhakar.com/projects/lightbox2/

lightbox lightbox_demo

 

誰もがよく知る代表ですよね。
モーダルウィンドウのことをLightBoxってずっと言ってました。

 

Slimbox2
http://www.digitalia.be/software/slimbox2/

slimbox2 slimbox2_demo

LightBoxの開発者がつくったjQueryベースの軽量なものだそうです。
どれぐらい軽量なのでしょうか。一回つかってみよーっと

FancyZoom
http://www.cabel.name/2008/02/fancyzoom-10.html

fancyzoom fancyzoom_demo

ズームする動きが気持ちよくて使ってました。

HTMLの表示ができる

ColorBox
http://www.jacklmoore.com/colorbox/

colorbox colorbox_demo_Examples

多種多様な要望がでてきて探しまくった結果、使いやすくカスタマイズがし易いのでこれを使い始めました。たくさんのテーマが元からありそこから選択することでいろいろと楽に使用ができます。

ThickBox
http://codylindley.com/thickbox/

ThickBox 3.1 ThickBox 3.1-d

同僚が使っているので使ってみた。
Simpleに使えてマルチ機能なPluginです。

learnModal
http://leanmodal.finelysliced.com.au/
leanModal leanModal_demo
今回のことで調べてみたところ見つかったもの軽快な動きで結構気に入りました。
難しいことをしなくて良さそうなときに一度使ってみるメモ。

 

レスポンシブ対応

Fancybox1
http://fancybox.net/

fancybox fancybox_demo

レスポンシブの対応やいろいろと進化する昨今、それに対応しまくってくれていると信じているPlugin。
オプションがたくさんあり、カスタマイズ性は抜群です。

Fancybox2
http://fancyapps.com/fancybox/

fancyBox2 fancyBox2_demo

正直なところ1と2の違いがよくわからず、2を使うと使えないオプションがあったので1でやっちゃう。いつかは2をちゃんと解析しなくちゃ・・・

Fresco
http://www.frescojs.com/

fresco fresco_demo

なんかギャラリーないずされたPlugin。使用したことはないが雰囲気良かったので、機会があったら使ってみよう。レスポンシブもいい感じで対応されているようで安心です。

Photo Swipe
http://photoswipe.com/
PhotoSwipe PhotoSwipe_demo
こちらも使用したことはないがレスポンシブ、スマホにすごく最適なのではと思った。
モーダルで開いた画像がガッツリ拡大できます。
小さな画面で見ている時には使いやすいのではないかと思います。

 

Magnific Popupってどんなのよ。

長々と、講釈をたれてもよくわかりませんよね。
ですので実際に使ってみようかと思います。

公式サイト
http://dimsemenov.com/plugins/magnific-popup/

Magnific Popup- Responsive jQuery Lightbox Plugin d-Magnific Popup- Responsive jQuery Lightbox Plugin

ダウンロードファイルはgithubから
https://github.com/dimsemenov/Magnific-Popup

dimsemenov-Magnific-Popup · GitHub

ダウンロードしてきたファイルを任意の場所に移し、JavaScriptやCSSへのパスを通してあげる。
そして、リンクに、クラスを仕込み
そのクラスをJavaScriptにて動作させる。
はい簡単!ってわかりません・・・よね・・・

JavaScriptやCSSへのパスを通す
jQuery使っているのでjQueryも忘れずに

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src=“≪設置した任意の場所≫/jquery.magnific-popup.min.js”>
<link href="≪設置した任意の場所≫/magnific-popup.css" media="all" rel="stylesheet">

 

リンクにクラスを設置

ポップアップさせたいリンクに共通でクラスを設置

<a href=“≪ポップアップ表示させたい画像≫” class=“popup”>≪サムネイル画像やリンクテキスト≫</a>

 

JavaScriptの設定

<script>
;jQuery(function($){
 $(‘.popup’).magnificPopup({
 type: "image"
 }); }); </script>

まぁ、標準的な設置の流れはこんなかんじです。
するとこんな感じになります。

See the Pen MagnificPopup_demo by msys (@msys) on CodePen.

あとは、JavaScriptのところでオプションなどを設定してあげてカスタマイズができます。 オプションに関してはなんやかんやいっぱいあるので以下参照してください。 http://dimsemenov.com/plugins/magnific-popup/documentation.html  

ちょっとしたカスタム例

よく使うオプションとかをちょっと例にだしてみます。

Youtube
最近動画とか載せることが多くなりました。

See the Pen MagnificPopup_demo3 by msys (@msys) on CodePen.

iframe?
サイトとか載せたりします?

See the Pen MagnificPopup_demo3 by msys (@msys) on CodePen.

ギャラリー
的なのがおおいですかね

See the Pen MagnificPopup_demo3 by msys (@msys) on CodePen.

色々とたくさんあってこまる昨今、自分がカスタマイズし易いやつを見つければよいとか、動きが心地よいとか、選択する理由はいっぱいあると思いますが、そんなことも最初はわかりません。さわってみないと!実際使ってみないと!わかりませんよね。
ですので、最初の選択肢の一つとして、誰かが使いやすいよ。と言っているのを使ってみるのもよいかと思います。
誰かが良いというものはどこか優れているものがあると思うので^^

では、今回はこんなかんじでばいぶー

 
 

この記事を共有する

マサヲシ
投稿者:マサヲシ
    2015年06月17日水曜日 | 14:10
    Wifi早いのほしい!
    会社にほしい!
    地味にアピールしてみるテスト

    この人が書いたその他のブログ記事

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    • I.M.Dコーポレートサイト
    お問い合わせ