2019年01月21日
jQueryでポップアップを実現するプラグイン
リンクのクリックで画像をポップアップさせようと思って探してみたところ、「Magnific Popup」というjQueryのプラグインが良さそうさ感じでした。
Magnific Popup Documentation
https://dimsemenov.com/plugins/magnific-popup/documentation.html
使い方
1. 必要なファイルを読み込む
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
2. ポップアップさせたいリンクを作成
<a class="image-link" href="/path/to/image.jpg">text</a>
2. 下記のようなスクリプトを実行 注
$(document).ready(function() {
$('.image-link').magnificPopup({
type: 'image',
image: {
verticalFit: false
}
});
});
これだけで、簡単にポップアップが実現できるみたいです。
画像以外にYouTubeやGoogle Mapsでも使えるそうなので、気になる人は試してみてください。
サンプル
※サンプルではリンクテキストの代わりに縮小した画像を使っています。
注
image: {verticalFit: false}
が不要な場合は削除してください。
タグ: jQuery
【ウェブデザインの最新記事】
この記事へのコメント