Lightboxプラグイン「Boxer」
![](http://kwski.net/blog/wp-content/uploads/2014/08/n__1201-604x270.png)
「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の設定を行って下さい。
関連記事
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
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