WordPressで投稿した記事内画像にlightboxのような画像拡大表示プラグインをつけたいと思い、いろいろ探しました。結果、デザインの良さから「wp-fancybox 」を使い始めました。以下に設定方法などを記載したいと思います。(検証はWordpress2.7で行っています。)
![]()
インストール
- 「wp-fancybox 」からプラグインファイルをダウンロード。
- 解凍してできたフォルダごと「wp-content/plugins」フォルダにアップロード。
- 管理画面にログインし、プラグインを有効化。
設定
[設定]項目の中に「FancyBox」の項目が増えているのでクリック。設定内容は以下。
- Hide on content click…拡大表示した画像を閉じる際、画像そのものをクリックして閉じることができるようにするか、しないかを選択。
- Show overlay…拡大表示の際、黒半透明で覆う、覆わないを選択。
- Overlay opacity…透過度の設定。0が透明、1が黒。0.1刻みで入力。
- Zoom in speed…画像を拡大する時の表示スピード。1000=1秒。
- Zoom out speed…画像を閉じる時の表示スピード。1000=1秒。
- jQuery expression…どの要素に対してFancyBoxを設定するのかを記述。(詳細は後述)
クラスを割り振らなくても拡大表示させる方法
WP FancyBoxは通常、拡大表示させたいimg要素に対して以下のようにclass="size-thumbnail"を記述する必要があります。これは面倒です。
そのため、Wordpress同梱のjQueryを使い、
<a href="http://blockworks.jp/"><img src="hoge.jpg" class="size-thumbnail"></a>
- 画像に対してリンクが貼られていて
- かつ、そのリンク先が「http://自サイト/wp-content/」のURLになっているもの
に対してのみ適用するようjQuery expressionに以下のコードを記述します。
jQuery("div.b_body a[@href^='http://自サイト/wp-content/'] img").parent();
- WordPress同梱のjQueryから指定する場合は、
$("要素")ではなく、jQuery("要素")と指定する必要があります。 - div.b_bodyはこのサイト特有のクラスです。記事単位のdivタグなどを設定すると良いと思います。
- wp-fancyboxのバグなのか、jQuery expressionの設定が保存されているにもかかわらず、表示されない現象が起こります。なので設定を変える度に毎回入力しなければいけないようです。




























