1. WordPress の Easy FancyBox プラグインについて
Easy FancyBox という WordPress プラグインを導入すると、画像URLを指定したリンクをクリックすると、その画像をポップアップ表示してくれるようになります。fancybox というライブラリを利用しているプラグインです。
このウェブサイトでも導入していますので、2つ例を示します。
問題点
Easy FancyBox で少し困るのは、何もしないと「画像へのリンク」すべてに、この Easy FancyBox が適用されてしまうことです。
2. 特定の画像リンクで、Easy FancyBox を適用させない方法
特定のリンクに Easy FancyBox を適用させない方法はいろいろあると思いますが、その1つを紹介します。
といっても簡単で、以下のように <a>
タグに onclick
属性を記述するだけです(赤字の部分です)。
<a href="xxxxx.png" onclick="jQuery(this).off()" target="_blank">
<img src="xxxxx.png" width="xxx"/> height="xxx"/>
</a>
何をしているのかと言うと、jQuery の off() メソッドを使い、このリンクのイベントハンドラーを削除しています。FancyBox 自体が jQuery に依存しているので、jQuery のメソッドが問題なく使えるはずです。
3. デモ
では、先程の2つの例にこの方法を適用してみます。
※ この 2つの例では、target="_blank"
も追加しているため、別タブで画像が開くはずです。