Last-Modified: 2020/09/22

【JSプラグイン】Magnific Popupを使って画像を拡大してみよう【実装方法を解説】

CODE JavaScript

Web制作をしていてクリックしたら画像が拡大されるモーダルのような物を実装したいと思っていたのですが、手軽に実装できるMagnific Popupというプラグインを見つけたので、本記事で紹介したいと思います。

Magnific Popupの実装方法

Magnific Popupがどのような物かは公式ページに飛んでもらって、上記画像で赤矢印を付けた部分をクリックしてもらうと分かります。

>>こちらが公式ページです

手順は次の通り。

1. ファイルをダウンロード
2. CSSとJSファイルを読み込む
3. aタグに任意のクラス名をつける
4. Scriptを書く

手順①:ファイルをダウンロード

下記リンク先からダウンロードが可能です。上の画像で赤矢印を付けた部分をクリックするとダウンロードできます。

>>ダウンロードはコチラ

その中で使うファイルが次の2つ。

• magnific-popup.css
• jquery.magnific-popup.min.js

手順②：CSSとJSファイルを読み込む

次にそれぞれのファイルを読み込みます。

<!-- magnific-popup -->
<link rel="stylesheet" href="css/magnific-popup.css">

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

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

手順③：aタグに任意のクラス名をつける

<a class="popup-link" href="画像のソースコード">Open popup</a>

手順④：Scriptを書く

<script>
$('.popup-link').magnificPopup({ 
       type: 'image'
   });
</script>

まとめ

クリックしたら画像が拡大されるMagnific Popupは簡単に実装できる割にかなり汎用性の高いプラグインです。

関連記事【drawer.jsの使い方】レスポンシブメニューの実装方法を解説

関連記事完全初心者からWeb制作できるようになるまでの勉強方法を語る【体験談あり】

JavaScript Web制作 初心者

• facebook
• Tweet
• Read Later