Magnific Popup

JavaScript

レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

レスポンシブに対応した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'
});

シンプルでとても使いやすいと思います。

オプションも色々あるのでダウンロードや詳細については公式サイトをご確認ください。

関連記事

  1. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  2. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  3. no-image
  4. jQuery Seat Charts
  5. Lightense Images
  6. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP