アフィリエイトのファンブログ

リンクのクリックで画像をポップアップさせようと思って探してみたところ、「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}が不要な場合は削除してください。