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 Floating Social Share
  2. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  3. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  4. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

コメント

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

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

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP