Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。
モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイプ も設定で可能となっており、タッチフレンドリーなプラグインになっています。
サイト ダウンロード
スクリプト
<link href="jquery.fs.boxer.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.fs.boxer.js" type="text/javascript"></script>
実装
それぞれのリンクに対してclass("boxer")を指定します。
ギャラリーとして表示したい場合は、それぞれのリンクに対して、data-gallery="gallery"を追加して下さい。
デフォルトでは#画像title属性をキャプション として表示可能であり、また「formatter」オプションを使用して自由に構成することができます。
(デモ)
<!-- ベーシック --> <a href="lightboxで開く画像" alt="キャプション" class="boxer">画像サムネイルもしくはテキスト</a> <!-- ギャラリー --> <a href="lightboxで開く画像" title="キャプション" class="boxer" data-gallery="gallery">画像サムネイルもしくはテキスト</a> <a href="lightboxで開く画像" title="キャプション" class="boxer" data-gallery="gallery">画像サムネイルもしくはテキスト</a> <script type="text/javascript"> $(".boxer").boxer(); </script>
動画
動画の場合もほぼ同じで、data-gallery="video"を指定して下さい。
<!-- 動画 --> <a href="lightboxで開く動画" alt="キャプション" class="boxer" data-gallery="video">動画サムネイルもしくはテキスト</a> <!-- Youtube --> <a href="http://www.youtube.com/embed/[ID]" class="boxer" data-gallery="videos" title="キャプション">動画サムネイルもしくはテキスト</a> <!-- Vimeo --> <a href="http://player.vimeo.com/video/[ID]" class="boxer" data-gallery="videos" title="キャプション">動画サムネイルもしくはテキスト</a>
モーダルウィンドウ
<a href="#div1201" class="boxer">Show Content</a> <div id="div1201" style="display: none;"> <div class="inline_content">表示コンテンツ</div> </div>
この場合、子要素であるinline_contentにwidthを設定して下さい。
.inline_content { width: 300px; overflow: hidden; }
オプション
オプションでは、スワイプ対応やボックス表示位置の指定などが設定可能です。
$(".boxer").boxer({ mobile: true, // 全画面表示 top: 50 // 表示縦位置指定 });
mobileオプションはモバイルクライントの場合は常にtrueになり、Lightboxオープン時に全画面表示となります。PCクライアントに対して全画面表示させたいときにtrueの設定を行って下さい。
関連記事
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
ページ内のフォントサイズを変更してくれる「Text Resizer」
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
-
色々なタイプの画像ギャラリーが実装できる「Rondell」
「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
Comment
はじめまして。
動画/Lightboxで検索していてたどり着きました。
参考にさせていただきました。ありがとうございます。
一点、
data-gallery="videos" を指定すると開いたときに、ウィンドウサイズが動画以外に下に白い部分が表示されるのですが、何か設定などされましたか。
data-gallery="videos" を解除すると白い部分がなくなります。動画の画面のみ表示されます。
度々すみません。自己レスです。
解決致しました!
ページ内の別の要素として「gallery」を利用していてそちらが効いておりました。
大変失礼いたしました。
Lightboxプラグイン「Boxer」 https://t.co/afCXjJkgDc
jQuery - Lightboxプラグイン「Boxer」
モーダルウィンドウ
いろいろプラグイン見てたらこういうのなのかなって。
https://t.co/1AYuZgYHHZ
“Boxer”
「Boxer」はLightbox・モーダルウィンドウ・スマホ対応化済プラグイン。動作軽快で良かった。ピンチインアウトは効かないかな。 http://t.co/u7aNAI5dxp #jQuery
RT @cotoc_web: jQueryライトボックスのスマホ対応が最近多くて、なかなかいいライブラリがなかったが、これはよかった。スマホ対応も自動できちんとやってくれます。
Lightboxプラグイン「Boxer」 http://t.co/l1fW9YDeYc
jQueryライトボックスのスマホ対応が最近多くて、なかなかいいライブラリがなかったが、これはよかった。スマホ対応も自動できちんとやってくれます。
Lightboxプラグイン「Boxer」 http://t.co/l1fW9YDeYc
@home メモ http://t.co/4rOEHOpTq9
メモメモ…
ポップアップとか
Lightboxプラグイン「Boxer」 http://t.co/PgaAJodOs3
自分用めも
jQueryを使うレスポンシブなLightboxの設置方法
jQuery | Lightboxプラグイン「Boxer」 http://t.co/vzfqD0EaNm