Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。
この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されています。モーダルウィンドウやポップアップウィンドウとしても使えるのでこれひとつで幅広くカバーできそうです。
ダウンロードはこちら

ライセンスはこのような感じです。

Script is available under MIT license and will always be kept this way.
But please do me a favor and do not create a public WordPress plugin based on it, because I will make it soon and it will be open souce too (want to get notified?).

WordPressプラグインは鋭意制作中なので公開しないで下さい。できたら知らせますとのこと(ここから登録)
他のWordPress Lightnox プラグインはこちら

オプションの解説ページ / デモ / 本家デモ

スクリプト

<link href="magnific-popup.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.magnific-popup.js" type="text/javascript"></script>

単体のlightbox

<div class="div-1105-single">
    <a href="lightboxで開く画像" alt="キャプション"><img src="サムネイルもしくはテキスト"></a>
    <a href="lightboxで開く画像" alt="キャプション"><img src="サムネイルもしくはテキスト"></a>
    .....
</div>

<script tye="javascript/text">
$(document).ready(function() {
    $('.div-1105-single').magnificPopup({
        delegate: 'a', // ポップアップを開く子要素
        type: 'image',
        image: {
            titleSrc: 'alt'  // キャプションとして表示する属性を指定(titleなど)
        }
    });
});
</script>

lightboxギャラリー

ギャラリーとして開くのは、オプションにgallery.enabled: trueを追加するだけです。

<div class="div-1105-gallery">
    <a href="lightboxで開く画像" alt="キャプション"><img src="サムネイルもしくはテキスト"></a>
    <a href="lightboxで開く画像" alt="キャプション"><img src="サムネイルもしくはテキスト"></a>
    .....
</div>

<script tye="javascript/text">
$(document).ready(function() {
    $('.div-1105-gallery').magnificPopup({
        delegate: 'a', // ポップアップを開く子要素
        type: 'image',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1]
        }, 
    });
});
</script>

ギャラリーのオプション

  • preload : (数値をカンマ区切りで指定) ギャラリー内のどの画像をプリロードするかを指定します。0の場合はひとつ前の画像を、1の場合はひとつ後の画像をプリロードします。n(任意の数値)を指定するとギャラリー内のnつ後の画像までプリロードします。
  • navigateByImgClick:画像クリックすると次の画像へ移動する

モーダルウィンドウ

画像以外を開くモーダルウィンドウとして使用するには type: 'inline'を指定します。

<a id="openmodal" href="#">open modal</a>
<div id="modal1105" class="white-popup mfp-hide">モーダルウィンドウに表示する内容</div>

<script tye="javascript/text">
$(document).ready(function() {
    $('#openmodal').magnificPopup({
        items: {
            type: 'inline',           // inlineを指定
            src: '#modal1105',        // 表示する要素の#id
            closeBtnInside: true      
        },
        alignTop: true,               // モーダルウィンドウの位置をtopにする
                                      // 指定しない場合はセンタに表示される
    });
});
</script>
  • このエントリーをはてなブックマークに追加

関連記事

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

no image

テキストに装飾効果を付けるプラグイン

Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑