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の設定を行って下さい。
関連記事
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
Lightboxなどが実装できるプラグイン「Magnific Popup」
「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
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