WordPress の Easy FancyBox プラグインで縦長画像が拡大表示が小さい

WordPress で作っている当ブログは、記事中の 画像 をクリックするとポップアップ拡大表示される、Lightbox系 プラグイン のうち、導入の簡単さから Easy FancyBox を使っています。このときポップアップレイヤーに拡大描画される 画像 は、ブラウザウィンドウの縦合わせになる為、極端に縦長な 画像 の場合に、期待するほど大きく表示されません。

むしろ小さくなる縦長画像の拡大表示

問題の画像は例えばこちらの記事にあるような、画面キャプチャを縦に連結させて作った比較的ピクセルサイズの高い画像です。それでいて画像内の文字を読みたくなるので、クリックしたくなるのですが、結果、ブラウザの縦サイズ次第ではむしろ拡大表示が小さくなってしまうことに。

図1.むしろ小さくなる拡大表示

このような問題に対してプラグインの設定で何か、拡大表示時の倍率設定やポップアップレイヤー上での画像拡大縮小方法について調べてみましたが、さすがにEasyと銘打っているだけに、有用そうな設定はありませんでした。

私と同じように考えている皆さんの考察を見付けますが、プラグインのCSSに深く切り込む感じになるので、検証と将来のプラグインのアップデート対応のことを考えると、このアプローチには手を出さない方が私には良さそうです。

W3Q

WordPressのメディアファイルを開いたときに閉じるボタンを付けたいです。「Easy F...

http://w3q.jp/q/5193

WordPressのメディアファイルを開いたときに閉じるボタンを付けたいです。「Easy FancyBox」というポップアップのプラグインを試しましたが、縦長の画像の場合、メディアファイルを開いたときの画像の高さがディスプレイの高さまでしか拡大されず小さく表示されてしまいます。メ...

特定の画像ではEasy FancyBox無効にする

残る手段はこうした特定の画像に対し、個別にEasy FancyBoxによる効果を無効とし、別窓で開く単純なリンクとすることです。その具体的手法については、こちらの記事を参考にさせて頂きました（鳴謝！）。

ラボラジアン

【WordPress】特定の画像には Easy FancyBox を適用させない方法

https://laboradian.com/disable-easy-fancybox-for-a-image/

Easy FancyBox という WordPress プラグインを導入すると、画像URLを指定したリンクをクリックすると、その画像をポップアップ表示してくれるようになります。fancybox というライブラリを利用しているプラグインです。 このウェブサイトでも導入していますので、2つ例を示します。 画像をクリックしてください クリックしてください → ハロー、子年(ねづみどし)！ 問題点 Easy FancyBox で少し困るのは、何もしないと「画像へのリンク」すべてに、この Easy FancyBox が適用されてしまうことです。 2. 特定の画像リンクで、Easy...

実際に普段、WordPressの記事中に貼り付けている画像は、ソースで見ると次のように構成されています。

この<a>タグの中に、 onclick="jQuery(this).off()"  を付与してjQueryを無効にした上で更に、  target="_blank" rel="noopener noreferrer"  を追記して、別窓でリンク先に指定した画像を開くようにします。

こうすることにより、スマートとは言えませんが、画像の表示方法、拡大縮小を閲覧者のブラウザ操作に委ねることが出来るので、最低限の利便性は確保されたと言えるでしょう（ブラウザではデフォルトで画像全体表示させる他、その画像上の任意部分をクリックすることで等倍表示に切り替わる）。

図2.画像を別窓で表示すればスクロール可

とは言え、そもそもピクセルサイズが高くて、極端に縦長や横長な画像を記事中に挿入しないように心掛けることが最良策に違いありません。