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の設定を行って下さい。

  • このエントリーをはてなブックマークに追加

関連記事

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

Comment

  1. はじめまして。
    動画/Lightboxで検索していてたどり着きました。
    参考にさせていただきました。ありがとうございます。

    一点、
    data-gallery="videos" を指定すると開いたときに、ウィンドウサイズが動画以外に下に白い部分が表示されるのですが、何か設定などされましたか。

    data-gallery="videos" を解除すると白い部分がなくなります。動画の画面のみ表示されます。

    • 度々すみません。自己レスです。
      解決致しました!

      ページ内の別の要素として「gallery」を利用していてそちらが効いておりました。

      大変失礼いたしました。

  2. 「Boxer」はLightbox・モーダルウィンドウ・スマホ対応化済プラグイン。動作軽快で良かった。ピンチインアウトは効かないかな。

  3. RT @cotoc_web: jQueryライトボックスのスマホ対応が最近多くて、なかなかいいライブラリがなかったが、これはよかった。スマホ対応も自動できちんとやってくれます。

    Lightboxプラグイン「Boxer」 http://t.co/l1fW9YDeYc

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑