レスポンシヴ対応で、画像や動画をズームして表示できるjQueryプラグイン［Magnific Popup］を紹介します。

基本的な動作は所謂「Lightbox」と同じですが、オプションの設定により、画像がスムーズにズームして表示されるようになります。

まずはサンプルをご覧ください。

Magnific Popup：オンズによる実装サンプル

ファイルのダウンロードは以下の公式サイトまたはGitHubからどうぞ。

［Magnific Popup］の実装方法

ダウンロードしたファイルのうち、スタイルシートの「magnific-popup.css」とスクリプトの「jquery.magnific-popup.js」をHTMLの<head>〜</head>内に設置します。
またこのとき、jQueryの本体ファイルも同時に読み込んでおきます。

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

次に［Magnific Popup］の設定を記述します。
以下の例では「class=”image-link”」というクラス名を付与したアンカータグ（「a」タグ）をクリックしたときに［Magnific Popup］が実行されるようになっています。

<script>
$('.image-link').magnificPopup({
	type:'image'
});
</script>

以上、これだけの簡単な設定で［Magnific Popup］を導入することができます。

Magnific Popup：オンズによる実装サンプル

iPhoneをはじめとするスマートフォンやiPadなどの携帯端末にも対応していて、どんなデバイスでも最適なサイズで画像を拡大表示してくれるので、「Lightbox」系のプラグインの中でも比較的使い勝手の良いはずです。
また現行ヴァージョンでは、IE7、IE8にも対応しているようです。

「マニフィック・ポップアップ」という名前の響きも可愛いですね。

また公式サイトによると、WordPressのプラグイン版も開発中とのこと。
こちらの情報も見逃さないようにチェックしておきましょう。

Magnific Popup：公式サイト