Magnific Popupを使ってみる

公開日:2018年01月29日

JavaScript

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

下準備

必要なファイル

上から順に読み込む

magnific-popup.min.css：Magnific Popup の基本デザイン
任意のファイル名.css：Magnific Popup のデザインを変更する際にCSSを記述するファイル
jquery.min.js：jQuery 本体
jquery.magnific-popup.min.js：Magnific Popup 本体
任意のファイル名.js：Magnific Popup の実行コードを記述するファイル

CDNを使って読み込み

CDN

Magnific Popup用CDN：https://cdnjs.com/libraries/magnific-popup.js/

jQuery用CDN：https://code.jquery.com/

CSSの読み込み

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

JSの読み込み

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="js/script.js"></script>

※</body>の直前に記述（動かない場合は<head>内に記述）することが多い

ファイルをダウンロードして読み込み

jQueryとMagnific Popupの必要なファイルを公式サイトからダウンロードして任意の位置に配置した後読み込む

CSSの読み込み

<link rel="stylesheet" type="text/css" href="css/magnific-popup.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css">

JSの読み込み

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/script.js"></script>

画像を配置

親にMagnific Popup用の名前をつける（今回はa要素にクラス名で「image-popup」、モーダルへのキャプションにtitle属性を記述）

  <ul class="gallery nomarker">
    <li><a class="image-popup" title="絵の説明文絵の説明文絵の説明文絵の説明文絵の説明文" href="images/bird01.png"><img src="images/bird01.png" alt="鳥"></a></li>
    <li><a class="image-popup" title="絵の説明文絵の説明文絵の説明文絵の説明文絵の説明文" href="images/bird02.png"><img src="images/bird02.png" alt="鳥"></a></li>
    <li><a class="image-popup" title="絵の説明文絵の説明文絵の説明文絵の説明文絵の説明文" href="images/bird03.png"><img src="images/bird03.png" alt="鳥"></a></li>
    <li><a class="image-popup" title="絵の説明文絵の説明文絵の説明文絵の説明文絵の説明文" href="images/bird04.png"><img src="images/bird04.png" alt="鳥"></a></li>
  </ul>

jQueryで実行コードを記述する

$('.image-popup').magnificPopup({
  type: 'image',
  closeOnContentClick: true,
  mainClass: 'mfp-img-mobile',
  image: {
    verticalFit: true
  }
});

コンテンツ一覧

同じタグのコンテンツ