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プラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

no image

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

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

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

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

no image

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

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

Comment

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

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

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

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

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

      大変失礼いたしました。

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

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

@ihsuihankixxx へ返信する コメントをキャンセル

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

*

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

    PAGE TOP ↑