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>
関連記事
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
テーブル・リスト要素を便利にしてくれるプラグイン
レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
Comment
[…] Lightboxなどが実装できるプラグインMagnific Popup […]
magnific popup
Lightboxなどが実装できるプラグイン「Magnific Popup」 http://t.co/QkMQbpQ893
プラグインを入れておいて結果的にこういう書き方になるように出力するとか
.@suzumeroboooooo 挙動サクサクしてて気持ちいいですよね〜、レスポンシブだしMITライセンスなので個人的には重宝する予感がしてます
http://t.co/bEweXDqclO
これ、文字の挿入とかカスタマイズしやすくていい感じだった。/ Lightboxなどが実装できるプラグイン「Magnific Popup」 http://kwski.net/jquery/1105/