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

関連記事

select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

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

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

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

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

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

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

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

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

no image

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

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

no image

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

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

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

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

no image

スワイプ対応の画像スライダー・ギャラリー用プラグイン

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

Comment

Message

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

*

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

    PAGE TOP ↑