超簡単【jQuery】Boxerの導入・設置・実装

Boxer(v3.3.0)設置

Boxer設置手順

【重要】BoxerはjQueryが設置されている事が前提です。
※GoogleにホストされているライブラリからjQueryファイルを読み込む方法を紹介します。

【Boxer-master】フォルダ内の「jquery.fs.boxer.min.js」「jquery.fs.boxer.min.css」をお使いのFTPクライアントを使用して、アップロードします。

html ファイルの <head>〜</head> 内に、以下のコードを記述します。
※各ファイルへのパスは環境に合わせて書き換えてください。

<link rel="stylesheet" href="css/jquery.fs.boxer.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.fs.boxer.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".boxer").boxer();
</script>

準備はこれで完了です。

Boxer(v3.3.0)実装

いよいよ画像をクリックすると画像や動画が拡大表示されますよ！

画像を単独で表示

<a href="images/image-1.jpg" class="boxer" title="My caption">
  <img src="images/image-1.jpg" alt="My caption" />
</a>

Boxer：サンプルを確認する。

aタグ内に「class=”boxer”」　を追加します。これで、Boxerの実装が完了です。
どうです、驚くほど簡単でしょう‼

画像をグループ化して表示

<a href="images/image-1.jpg" class="boxer" title="My caption1" data-gallery="gallery">
	<img src="images/image-1.jpg" alt="My caption" />
</a>
<a href="images/image-2.jpg" class="boxer" title="My caption2" data-gallery="gallery">
	<img src="images/image-2.jpg" alt="My caption" />
</a>
<a href="images/image-3.jpg" class="boxer" title="My caption3" data-gallery="gallery">
	<img src="images/image-3.jpg" alt="My caption" />
</a>

Boxer：サンプルを確認する。

aタグ内に「class=”boxer”」「data-gallery=”gallery”」　を追加します。これで、Boxer（画像のグループ化）実装が完了です。
グループ化の際は「gallery」の値はなんでもかまいませんが、グループ内では共通の値を設定します。
共通の値、「data-gallery=”gallery”」で指定された画像はグループ化され、画像の前後（左右）をクリックすると順にプレビューされていくようになります。
本当に、簡単ですね！

この他にオプションも用意されていますが、オプションの詳細は、別の機会にご説明しますので、それではまたの機会に(=ﾟωﾟ)ﾉ

動画を表示

<a href="https://www.youtube.com/embed/2vjPBrBU-TM" class="boxer" data-gallery="videos">
  <img src="https://i.ytimg.com/vi/2vjPBrBU-TM/sddefault.jpg" alt="Sia - Chandelier (Official Video)" />
</a>

Boxer：サンプルを確認する。

aタグ内に「class=”boxer”」「data-gallery=”videos”」　を追加します。これで、Boxerの実装が完了です。
どうです、驚くほど簡単でしょう‼

Follow me!