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

関連記事

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

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

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

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

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

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

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

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

Comment

@dreamjunkie666 にコメントする コメントをキャンセル

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

*

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

    PAGE TOP ↑