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

関連記事

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

no image

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

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

no image

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

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

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

no image

グリッドレイアウト プラグイン

Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb

no image

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

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

Comment

Message

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

*

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

    PAGE TOP ↑