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>
関連記事
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
ページ内のフォントサイズを変更してくれる「Text Resizer」
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
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/