サムネイルをクリックすると大きな画像で表示する jQueryプラグイン Boxerを試してみた

サムネイルをクリックして大きな画像で表示するプラグインというと LightBoxが有名ですが、同じような機能を持った jQueryプラグインは数多く存在します。今回は、Boxerを紹介をします。

Boxerの使い方

GitHubに公開されている Boxerのページからデモファイルをダウンロードして、Boxerを実装するのに必要なファイルをサーバーにアップロードします。ファイルは、jquery.fs.boxer.min.js、jquery.fs.boxer.css、jquery.fs.boxer-icons.png、jquery.fs.boxer-loading-dark.gif、jquery.fs.boxer-loading.gifです。

HTML head

<link href="css/jquery.maximage.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.fs.boxer.min.js"></script>

jQueryのライブラリ、jquery.fs.boxer.min.js、jquery.fs.boxer.cssを HTMLの head要素に読み込ませる。

HTML body

<a class="boxer" href="拡大表示させる画像のURL"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL"><img alt="画像の説明" src="画像URL" /></a>

サムネイル用の画像を a要素で囲み、href属性に拡大表示させる画像の URLを指定します。次に class属性に boxerを指定します。複数のサムネイルに親要素を設けて、それに class属性に boxerを指定する事で一括指定にする事もできます。

CSS

/*閉じるボタンの設定*/
#boxer .boxer-close {
  background: #fff url(../images/boxer/jquery.fs.boxer-icons.png) no-repeat -70px 10px;
}

/*ナビゲーションの設定*/
#boxer .boxer-control {
  background: #fff url(../images/boxer/jquery.fs.boxer-icons.png) no-repeat 0 0;
}

/*ローディング画像の設定*/
#boxer.loading .boxer-container {
  background: #fff url(../images/boxer/jquery.fs.boxer-loading.gif) no-repeat center;
}

/*モバイル用ローディング画像の設定*/
#boxer.mobile.loading .boxer-container {
  background: #000 url(../images/boxer/jquery.fs.boxer-loading-dark.gif) no-repeat center;
}

/*オーバーレイの設定*/
#boxer-overlay {
  background: #000;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 105;
}

/*オーバーレイの不透明度の設定*/
.boxer-open #boxer-overlay {
  opacity: 0.75;
}

CSSでは、閉じるボタンやナビゲーションボタン、ローディング画像の指定、拡大表示した際のオーバーレイの設定が主になると思います。

JavaScript

$(function(){

  $('a.boxer').boxer();
});

.boxerを指定した要素で .boxer( )を実行させます。これだけの記述でサムネイルをクリックすると画像を拡大表示してくれます。

Boxer · Formstone

FORMSTONEは多数の jQueryプラグインを公開しているようです。

Boxerのオプション

オプション	初期値	説明
callback	$.noop	コールバック関数　callback: function(){}
extensions	'jpg', 'sjpg', 'jpeg', 'png', 'gif'	使用する画像の拡張子の種類
fixed	false	サムネイルを拡大表示した時に画像をウィンドウに固定する
formatter	$.noop	キャプション機能を使用する時の関数
height	100	拡大画像をローディングしている時の枠の高さ
labels.close	'Close'	閉じるボタンのテキスト
labels.count	'of'	ギャラリー機能を使用している時に画像の枚数をカウントしている部分の区切り文字
labels.next	'Next'	ギャラリー機能を使用している時のナビゲーション（次へ）に使われるテキスト
labels.previous	'Previous'	ギャラリー機能を使用している時のナビゲーション（前へ）に使われるテキスト
margin	50	拡大表示した時のウィンドウと画像の余白
minHeight	100	拡大表示した画像の高さの最小値
minWidth	100	拡大表示した画像の幅の最小値
opacity	0.75	拡大表示した時のオーバーレイの不透明度
retina	false	高解像度対応
width	100	拡大画像をローディングしている時の枠の高さ

Boxerのデモ 1

サムネイルをクリックすると拡大表示されます。

HTML body

<a class="boxer" href="拡大表示させる画像のURL"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL"><img alt="画像の説明" src="画像URL" /></a>

サムネイルの a要素に class=”boxer”と titleを指定。

JavaScript

$(function(){

  $('a.boxer').boxer({margin: 100});
});

リンク先の画像を表示させる際にウィンドウサイズに対するマージンを画像に指定できます。

Boxerのデモ 2

Boxerにはギャラリー機能がありサムネイルを拡大表示させた状態でナビゲーションによる画像の切り替えができます。

HTML body

<a class="boxer" href="拡大表示させる画像のURL" data-gallery="gallery"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL" data-gallery="gallery"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL" data-gallery="gallery"><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL" data-gallery="gallery"><img alt="画像の説明" src="画像URL" /></a>

サムネイルの a要素に data-gallery="gallery"を指定するとギャラリー機能が有効になります。また、ギャラリーを複数設置する場合は data-gallery="gallery-1"、data-gallery="gallery-2"のように分ける必要があります。

JavaScript

$(function(){

  $('a.boxer').boxer();
});

ギャラリー機能を有効にする場合に必要な JavaScriptの指定はありません。

Boxerのデモ 3

a要素に title属性を追加するとキャプションとして使用する事ができます。

HTML body

<a class="boxer" href="拡大表示させる画像のURL" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."><img alt="画像の説明" src="画像URL" /></a>
<a class="boxer" href="拡大表示させる画像のURL" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."><img alt="画像の説明" src="画像URL" /></a>

サムネイルの a要素に class="boxer"と titleを指定。

JavaScript

$(function(){

  $('#demo-boxer-3 .boxer').boxer({

    formatter: formatCaptions,
    margin: 100
  });

  function formatCaptions($target) {

    return '<p>' + $target.attr("title") + '</p>';
  }
});

boxerのプロパティに formatterオプションを指定する。