【magnific popup】画像や動画をポップアップウィンドウで表示できる便利なjQuery

こんにちは、ハル@haru_elpisです。

画像やYoutube・Google map・外部htmlをポップアップウィンドウで表示できる「lightbox.js」の紹介です。

magnific popupの使い方

ダウンロード

GitHub - dimsemenov/Magnific-Popup: Light and responsive lightbox script with focus on performance.

Light and responsive lightbox script with focus on performance. - dimsemenov/Magnific-Popup

github.com

ダウンロードした「jquery.magnific-popup.min.js」・「magnific-popup.css」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<script type="text/javascript" src="./js/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/magnific-popup.css">

HTML

<a href="gazou-path" class="popup-btn">OPEN</a>

JavaScript

$('.popup-btn').magnificPopup({
    type:'image'
  });
});