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

画像や動画にも対応

Boxerで画像や動画を拡大表示

画像だけでなく、動画にも対応した jQuery プラグイン「Boxer」です。 画像をクリックすると、背景が暗くなり画面内に指定された画像や動画が拡大表示されます。 動画をLightBox風に拡大表示できるプラグインで、簡単にHPへ実装できます。 そこで、今回は「超簡単【jQuery】Boxerの導入・設置・実装」と題して取り上げてみます。

Boxerでの拡大表示の動きをご確認されたい方は、サンプルページで実際の表示や動作をご確認ください。 jQuery プラグイン Boxer:サンプル

Boxer(v3.3.0)導入

Boxerを手に入れよう‼

BoxerをWebサイトへ実装するに当たって「Boxer」を手に入れる必要があります。 「Boxer」はGitHubからのダウンロードが可能となっています。 GitHubからのダウンロードするには〔FormstoneClassic/Boxer〕へアクセスして、「Boxer」のデータをダウンロードします。 ※最新のバージョンは3.3.0となります。(2016/09/05) Boxerの開発は2015年4月で終わっています。

ダウンロードしたZIPファイルを解凍すると、「Boxer-master」フォルダとファイルが作成されます。 boxer-master

Boxer実装には、「Boxer-master」フォルダ内の「jquery.fs.boxer.min.js」「jquery.fs.boxer.min.css」2つのファイルが必要となり、実装はかなり簡単に行えます。