Easy FancyBox – 記事の画像を別ウィンドウで拡大表示できるWordPressプラグイン

Easy FancyBoxは、記事に配置した画像をクリックした際に、拡大画面を別ウィンドウでふわっと拡大表示できるWordPressプラグインです。Lightbox系のプラグインです。

画像の拡大表示のみであればプラグインをインストールして有効にするだけで利用できます。画像以外にも、YouTube動画、PDF、SWFなど、様々な形式に対応しています。

このプラグインを利用すると画像の拡大表示が視覚的に格好良くなるので、ブログの閲覧者になんとなく先進的な印象を与えることができます。

はじめに

このプラグインが優れている点

1. 記事に配置した画像をクリックした際に別ウィンドウでふわっと拡大表示できる。
2. 画像の拡大表示のみであれば初期設定のままでも利用できる。画像形式はJPG・GIF・PNGに対応。
3. ギャラリーで複数画像をポップアップ表示することもできる。
4. YouTube、Vimeo、Dailymotionの動画の表示にも対応している。
5. PDF、SWF、SVGの表示に対応。

動作見本

Easy FancyBoxは、jQueryのFancyBoxを利用して動作しています。
FancyBoxの公式サイトに実際に動作する様々な種類の見本が公開されています。
実際に動作する見本をご覧下さい。

fancybox

使用上の注意点

Easy FancyBoxは、他のJavaScriptライブラリと競合する場合が多々あります。
その場合は、他のプラグインやJavaScriptライブラリを利用しましょう。

インストール方法

管理画面から検索してインストールして下さい。
もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

1. WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「Easy FancyBox」で検索
2. WordPress.org からダウンロード

管理画面の設定

管理画面の場所

Easy FancyBoxの管理画面は、設定のメディアの中に追加されます。

WordPress管理画面 ＞ 設定 ＞ メディア

メディア設定

Easy FancyBoxを利用する際は、Mediaの設定項目で使用する形式にチェックを入れて下さい。画像以外の形式は、管理画面で指定しないと利用できませんのでご注意下さい。

ポップアップの外観や動作に関しては、特に変更しなくても利用できます。細かい設定は後から変更しましょう。

メディアを挿入

記事に画像などのメディアを追加する際は、必ずリンク先に「メディアファイル」を指定して下さい。そうしないとホップアップ表示が動作しません。

ギャラリーを作成

複数の画像を連続して表示するギャラリーを作成する場合は、記事編集画面の上部にある「メディアを追加」ボタンをクリックし、画面左側にある「ギャラリーを作成」を選択し、メディアライブラリから複数の画像を選択して記事に挿入すると、ギャラリーを作成できます。そうすると、複数の画像を連続して表示させることができます。下記の画面は、4枚の画像を同時選択した例です。

YouTube動画の使用例

Easy FancyBoxでYouTube動画を利用する際は、AタグにYouTubeへのリンクがあれば、自動検出され、ポップアップ表示されます。手動の場合は、Aタグにclassで「fancybox-youtube」を記述します。

画像以外のメディアファイルの場合も同じように自動検出で利用できます。尚、インラインコンテンツとiframeは手動のみです。自動検出はありません。詳しくは管理画面に表示される説明（英語）をご覧下さい。

<a href="http://www.youtube.com/watch?v=pfxB5ut-KTs">YouTube動画</a>

<a href="http://www.youtube.com/watch?v=pfxB5ut-KTs" class="fancybox-youtube">YouTube動画</a>

手動でclass指定できる内容

まとめ

Easy FancyBoxは、記事に配置した画像をクリックした際に、ふわっと別ウィンドウで拡大表示できるプラグインです。Youtube動画など、画像以外の様々な形式にも対応しています。

このプラグインは画像が沢山あるブログで利用すると良い感じになります。また、単一の画像だけでなく、複数枚の画像をまとめて表示するギャラリーにも対応しています。

自分が撮影した写真を公開するブログや自分が描いた作品等を公開するブログで活用しましょう。