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

Boxer(v3.3.0)設置

Boxer設置手順

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

  1. 【Boxer-master】フォルダ内の「jquery.fs.boxer.min.js」「jquery.fs.boxer.min.css」をお使いのFTPクライアントを使用して、アップロードします。 LightBox-ftp
  2. html ファイルの <head>〜</head> 内に、以下のコードを記述します。 ※各ファイルへのパスは環境に合わせて書き換えてください。

準備はこれで完了です。

Boxer(v3.3.0)実装

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

画像を単独で表示

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

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

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

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

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

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

動画を表示

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

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