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. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  2. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  3. ajSlider

    JavaScript

    シンプルでさりげないアニメーションが素敵なスライドショー実装「ajSlider」

    ajSliderはシンプルなスライドショーを実装することができるjQu…

  4. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  5. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  6. Simple Image Panner and Zoomer

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP