プラカンブログSTAFF BLOG

2016.09.13

カスタマイズしやすいモーダルギャラリー「magnificPopup」の使い方

こんにちはデザイナーのSUGIYAMAです。
今回はコーポレートサイトの実績紹介でも使用しているモーダルウィンドウ系ギャラリー「magnificPopup」をご紹介します。


公式サイト

http://dimsemenov.com/plugins/magnific-popup/

ライブラリのダウンロードはこちら
https://github.com/dimsemenov/Magnific-Popup


ライブラリの読み込み

上記からライブラリをダウンロードして、CSSとJSファイルを読み込みます。
必要なのは dist ディレクトリの中に入っているファイルです。

<link rel="stylesheet" href="css/magnific-popup.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>

画像単体で表示させる方法

単体の画像を表示させる場合は以下の方法になります。

Javascript

$(function(){
      $('.popup_element').magnificPopup({
      type: 'image'
  });
});

モーダルにする要素のclass名を設定します。

html

<a href="../images/modal/01.jpg" class="popup_element">
    <img src="../images/modal/thumb-01.jpg" />
</a>

ギャラリー表示させる方法

複数の画像を連続して表示させる場合は以下の方法になります。

Javascript

$(function(){
$('.container').magnificPopup({
  delegate: 'a',   
  type: 'image',  
  gallery: {
    enabled:true
  }
  });
});

まず要素の親要素を指定します。次に「delegate」で子要素を指定します。

html

<div class="container">
<a href="img/element01.jpg">
<img src="img/element01.jpg" />
</a>
<a href="img/element02.jpg">
<img src="img/element02.jpg" />
</a>
<a href="img/element03.jpg">
<img src="img/element03.jpg" />
</a>
<a href="img/element04.jpg">
<img src="img/element04.jpg" />
</a>
</div>

指定した親要素で大枠を作り、次に各画像に「delegate」した要素で囲います。


アニメーションをつける方法

画像の場合、小さいサイズからそのままzoomする機能があります。

JS

$(function(){
  $('.popup_element').magnificPopup({
    delegate: 'a',   
    type: 'image',  
    zoom: { 
    //zoom機能
          enabled: true,  
          duration: 300,   //アニメーション速度
      }
  });
});

Retinaディスプレイにも対応

画像をRetina対応デバイスで表示させると、サイズによってはにじんで表示される場合があります。
magnificPopupでは画像を通常用とRetinaディスプレイ用ので2つのファイルを用意しておき、デバイスごとに画像を出し分けることが可能です。

$(function(){
    $('.popup_element').magnificPopup({
      type: 'image',  
      retina: {
        ratio: 2,   //device pixel ratioを判別
        replaceSrc: function(item,   ratio) {
          return item.src.replace(/\.\w+$/,   function(m) { return '@2x' + m; }); // ファイル名の終わりに「@2x」を追加する
        }
      }
    });
});

この場合、device pixel ratioが「2」で、typeが「image」の場合に動作します。
通常の画像が「element.jpg」だったとしたら、Retinaディスプレイでは「element@2x.jpg」に置き換えます。

※「Apple iPhone 6 Plus」など一部の端末ではdevice pixel ratioが「3」なので注意してください。

device pixel ratio(デバイス・ピクセル比)とは
デバイス・ピクセル(ハードウェア・ピクセル)がサポートする物理的な最小単位のピクセルと、CSSで使う論理上のピクセルの比率を指します。端末によって比率が違うの注意が必要です。

参考サイト
https://bjango.com/articles/min-device-pixel-ratio/


画像だけじゃなくHTML要素、動画なども可能です。

今回はギャラリーを中心にご紹介しましたが、HTML要素や動画などもモーダルで開くことができます。またCSS3のanimationなどと組み合わせる事で色々なエフェクトをつけることも可能です。レスポンシブにも対応しており、各種端末に合わせてサイズを調整してくれるのも魅力です。

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc(杉)

この記事は、SUGIYAMA が書きました。