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>
  • このエントリーをはてなブックマークに追加

関連記事

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

「jqPlot」 カスタマイズ

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

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

no image

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

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

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

Comment

Message

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

*

PAGE TOP ↑