Learning site for website creation

Magnific Popupを使ってみる

  • 投稿日:2018年01月29日

公式サイト: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
  }
});