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の設定を行って下さい。
関連記事
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
-
-
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
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