こんにちは、ハル@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
ダウンロードした「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'
});
});
コメント