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プラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
わずかなコードで画像をサムネイル化してくれる「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/