アフィリエイト広告を利用しています

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

この記事へのコメント

プロフィール

PC好きのアフィリエイターですが、最近はアフィリエイトへの興味がやや減少傾向

このブログもほとんど更新できていませんでしたが、今後は気が向いたときにつぶやきを投稿する形で運用していこうかなと思っています

にほんブログ村

当サイトについて
当サイトはA8.netが運営する会員向けブログサービス「 ファンブログ 」を利用しています。

当サイトに関してご意見等がありましたら、下記メールフォームより送信してください。今後の運営の参考とさせていただきます。
メールフォーム

Amazonのアソシエイトとして、当サイトは適格販売により収入を得ています。

Powered by ファンブログ

Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: