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の設定を行って下さい。
関連記事
-
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
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