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>
関連記事
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
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/