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>
関連記事
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。
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/