レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」がとてもよかったのでご紹介します。指定した要素をクリックするとオリジナルの画像がポップアップして表示されます。一枚ずつ画像を見せることもできるし、画像グループを作ってギャラリーっぽくすることもできます。あと軽量なのも嬉しいですね。画像以外にもテキストやフォームといった色んなものをポップアップすることができます。以下、使い方です。
[ads_center]
使い方
jQueryとダウンロードしたプラグインを読み込みます。
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="magnific-popup/jquery.magnific-popup.js"></script>
Magnific Popupをセットします。
$('.test-popup-link').magnificPopup({
type: 'image'
});
HTMLは以下のように記述します。href属性には画像パスを指定します。
<a class="test-popup-link" href="画像パス">ポップアップ</a>
また、グループを作りたい場合は以下のようにクラス名「parent-container」をつけた要素で括ります。
<div class="parent-container">
<a href="画像パス1">ポップアップ1</a>
<a href="画像パス2">ポップアップ2</a>
<a href="画像パス3">ポップアップ3</a>
</div>
で、Magnific Popupをセットします。セレクタには親要素を指定し、delegateにはその子要素であるaを指定します。
$('.parent-container').magnificPopup({
delegate: 'a',
type: 'image'
});
シンプルでとても使いやすいと思います。
オプションも色々あるのでダウンロードや詳細については公式サイトをご確認ください。
