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. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  2. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  3. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  4. no-image

    JavaScript

    スクロール時に要素を固定できるjQueryプラグイン「ScrollFix」

    ScrollFixはスクロール時に特定の要素を固定して表示できるjQu…

  5. stickUp
  6. PreViewTube.js

コメント

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

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

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP