ブロックワークス

2009.01.31

WordPressの画像拡大表示プラグインwp-fancyboxとクラスを割り振らなくても拡大表示させる方法

WordPressで投稿した記事内画像にlightboxのような画像拡大表示プラグインをつけたいと思い、いろいろ探しました。結果、デザインの良さから「wp-fancybox 」を使い始めました。以下に設定方法などを記載したいと思います。(検証はWordpress2.7で行っています。)

Wordpressの画像拡大表示プラグインwp-fancyboxとクラスを割り振らなくても拡大表示させる方法

インストール

  1. wp-fancybox 」からプラグインファイルをダウンロード。
  2. 解凍してできたフォルダごと「wp-content/plugins」フォルダにアップロード。
  3. 管理画面にログインし、プラグインを有効化。

設定

[設定]項目の中に「FancyBox」の項目が増えているのでクリック。設定内容は以下。

wpfbox01.jpg

  • 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="https://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の設定が保存されているにもかかわらず、表示されない現象が起こります。なので設定を変える度に毎回入力しなければいけないようです。